Le style des liens en CSS

1. Survol ( :hover): lorsque le curseur de la souris est placé en haut du lien sans cliquer
2. Visited ( :visited): Apparition d’un lien sur lequel l’utilisateur a cliqué auparavant lorsque le curseur de la souris ne se trouve pas dessus
3. Actif ( :active): lorsque le lien est en cours de clic. C’est peut-être très rapide, mais c’est quand le bouton de la souris a été enfoncé et avant que le clic ne soit terminé.

a {
text-decoration: none; /* supprimer les traits de soulignement */
color: green; /* des liens en vert au lieu du bleu */
}

• a:link

• On va utiliser la pseudo-classe :link avec l’élément <a> pour cibler uniquement les vrais liens (les ancres nommées avec la balise <a> ne sont pas concernées).

Exemple :

a {
text-decoration: none; /* supprimer les traits de soulignement */
color: green; /* des liens en vert au lieu du bleu */
}

• Le sélecteur de pseudo-classe “a:link” cible uniquement les vrais liens, c’est-à-dire les éléments <a> dotés d’attributs href ;

• a:hover

• La pseudo-classe :hover associée à la balise <a>, permet de personnaliser l’aspect des liens lors du passage de la souris au-dessus du lien.

Exemple :

a:hover { /* Quand le visiteur passe la souris au-dessus du lien*/ 
text-decoration: underline; /* lien souligné au passage de la souris */
color: red; /* au passage de la souris, le lien aura une couleur rouge */
}

• a:active

• La pseudo-classe :active est utilisé pour sélectionner et mettre en forme le lien actif.
• Un lien devient actif lorsque vous cliquez dessus.
• La pseudo-classe :active permet de définir l’aspect des liens au moment du click.

La pseudo-classe :active peut être utilisé sur tous les éléments, pas seulement sur les liens.

• :focus

• La pseudo-classe :focus permet de spécifier l’apparence du lien lorsqu’il reçoit le focus.
• Le focus dans le domaine informatique désigne l’attention d’un système d’exploitation ou d’un logiciel. On peut attribuer le focus à un élément soit par la souris ou la touche tabulation.

Exemple :

a:focus {
color: green;
font-size: 1.2em;
}

• a:visited

• La pseudo-classe :visited est strictement réservé aux liens, il sert à personnaliser l’aspect des liens qui ont été visités, pour que l’internaute ne se perd pas lors de sa navigation.
• Par défaut les liens visités sont représentés par un violet qu’il convient de modifier :

a:visited { /* Quand le visiteur a déjà visité le lien */
text-decoration: line-through; /* les liens visités seront barrés,
je crois que c'est plus méchant  comme style */ 
}

a:link, a:visited, a:hover, a:focus, a:active

En anglais, une petite formule a été retenue pour se remémorer cet ordre : “Lord Vader Hates Furry Animals” (Darth Vader n’aime pas les bêtes à poil).