Travaux pratiques
TROISIÈME PARTIE
162
Il est temps d’habiller ce menu, en stylant ses liens . Ils seront verts et non soulignés :
Toutes les propriétés dont le sélecteur n’implique aucune pseudo-classe sont valables
pour tous les états de l’élément. Cette feuille de styles ne distingue donc pas encore
les divers états de l’élément . Un lien peut être visité (pseudo-classe :visited),
survolé par le pointeur de la souris (:hover), actif, c’est-à-dire en cours de sélection
(:active), ou simplement dans son état par défaut (:link). Sans autre précision, le
survol du lien n’induira donc aucune modification sur son apparence.
En explicitant un état particulier, on modifie l’apparence du lien dans cette seule
situation. Pour représenter en orange les liens situés sous le pointeur de la souris, on
peut ainsi écrire :
CSS
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-type: none;
}
#menu a {
color: green;
text-decoration: none;
}
À RETENIR Ordre de déclaration des pseudo-classes
Il est recommandé de déclarer les pseudo-classes de liens selon l’ordre précis suivant, qui seul garantit
leur correcte interprétation :
1. :link
2. :visited
3. :hover
4. :active
Pour se le rappeler, on pourra penser à l’expression mnémotechnique « LoVe HAte » (amour-haine).
Cette liste n’est pas complète. Il manque par exemple le pseudo-élément :focus qui désigne l’élément
auquel on a donné l’attention, plus généralement lorsqu’on pointe un élément via une navigation par clavier (touche Tab) et non au clic. Ce pseudo-élément est particulièrement pratique pour augmenter l’accessibilité des liens concernés. Malheureusement, il sera inutile sur Internet Explorer, qui ne le reconnaît pas.
CSS
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;