Cours html-css, tutoriel & guide de travaux pratiques en pdf.

Le texte

• text-indent : permet d’ajouter une indentation 2 en d´ebut de paragraphe.
Exemple :
p { text-indent: 30px; }
• text-align : Comme son nom l’indique, g`ere l’alignement du texte, gauche (left), droite (right) ou centr´e (center). De plus, on peut justifier (justify), c’est a` dire que la ligne sera ´etir´ee de sorte que les marges de gauche et de droite soient identiques. Exemple :
p { text-align: center; }
Il existe d’autres options, pas vraiment utiles ou esth´etiques que nous ne mentionnerons pas ici.
2. indentation : petit d´ecalage de la premi`ere ligne du paragraphe

Exercice

Toujours sur notre exercice precedent : – indentez le texte du paragraphe de 20 pixels et justifiez-le. – centrez le texte du titre de niveau 1.

Les liens

On peut appliquer aux liens tout ce qu’on sait au sujet des polices et du texte. la nouveaute, c’est que le CSS permet des effets sympathiques. La norme sur le net veut qu’un lien soit bleu et souligne s’il n’a jamais ete visite, et rouge souligne s’il a deja ete visite. Pour bien comprendre, nous devons definir la notion de pseudo classe qui permet de tenir compte de certains evenements.
• Pseudo-classes liens visit´es ou non (link et visited) : nous savons que la balise <a> definit des liens internet. Nous voulons donc que les liens non visites bleus, visites en rouges.
a:link { color: blue; } a:visited { color: red; }
Resultat : liens non visit´es liens visites • Pseudo-classes d’affichage : active permet d’agir sur des liens actives. Exemple : les liens auront un arriere-plan jaune s’ils sont actives (cliques).
a:active { background-color: #FFFF00; }
• Pseudo classe d’effets au survol par le curseur… tres joli pour donner un petit cote dynamique aux liens (hover). Exemple : au survol, les liens se colorent en orange, deviennent gras et les lettres s’espacent de 5px.
a:hover{ color: orange; font-weight: bold; letter-spacing: 5px; } a:visited { color: red; }
A doser evidement, il ne faut pas exagerer…