Comment définir l’apparence de ses liens ? #CSS #HTML

CSS permet d'appliquer des styles différents aux liens suivant leur état: normal, visité, survolé, cliqué. Pour cela, on utilise les pseudo-classes suivantes:

• :link (état par défaut);
• :visited (lien pointant sur une page déjà visitée, et présente dans l'historique du navigateur);
• :hover (état survolé);
• :focus (état d'un élément qui a reçu «l'attention», par exemple un lien lorsqu'on y accède grâce au clavier, ou un champ texte d'un formulaire lorsqu'on clique dedans);
• :active (état cliqué).

(Notons que si :link et :visited sont réservés aux liens (élément HTML a), les pseudo-classes :hover, :focus et :active peuvent s'appliquer à d'autres éléments.)

Ordre des déclarations

Attention à l'ordre des déclarations! Un lien peut avoir plusieurs états simultanément; par exemple un lien vers une page déjà visitée aura, lorsqu'on le survole, les deux états suivants: visited et hover.
Il faut donc définir une priorité pour savoir quel état doit s'appliquer. Dans notre exemple, on voudra sans doute que l'état hover prenne le pas sur l'état visited. Pour définir la priorité, il suffit de placer en dernier les déclarations prioritaires.
L'ordre classique (par priorité croissante) est le suivant: link < visited < hover < focus < active.

Il est souvent désigné par le petit truc mnémotechnique «LoVe HAte», qui en code CSS donne ceci:

a:link {color: black;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: red;}

On notera que dans cet exemple: 1) on utilise la même apparence pour les liens survolés et cliqués, et 2) on a ommis la pseudo-classe :focus, pourtant très utile!

On peut factoriser notre code et rajouter la pseudo-classe manquante, en utilisant le même style pour les liens survolés, navigués au clavier ou cliqués:

a:link {color: black;}
a:visited {color: gray;}
a:hover, a:focus, a:active {color: red;}

On peut encore simplifier en se passant de la pseudo-classe :link. Voici un exemple avec un style commun à tous les liens, puis quelques pseudo-classes pour modifier l'aspect des liens suivant leur état:

a {
  text-decoration: underline;
  color: #a00;
}
a:visited {
  color: #844;
}
a:hover, a:focus, a:active {
  text-decoration: none;
  color: white;
  background: #800;
}

Notons enfin que la présence d'un style différent pour les liens visités, une convention autrefois très bien établie (elle fait partie des styles par défaut des navigateurs, qui affichent les liens visités en mauve à la place du bleu par défaut), est de moins en moins courante sur les sites web modernes.

Cela pour plusieurs raisons: il y a d'autres mécanismes permettant à l'utilisateur de se repérer; les designers qui travaillent avec un logiciel de graphisme (Photoshop, Fireworks…) oublient souvent de designer ces états; la gestion de nombreux états des liens pour plusieurs styles de liens différents sur un même site est fastidieuse.