Le style des liens en CSS

Objectif

• Connaitre les les propriétés CSS qui s'appliquent à l'élément <a>.

Introduction

• Un lien élémentaire se crée en intégrant le texte que vous voulez transformer en lien dans un élément <a> et en lui affectant un attribut href (également connu comme étant une Hypertext Reference, ou target) contenant l'adresse web vers laquelle vous voulez que le lien pointe.
• Le moyen le plus simple de mettre en forme un lien consiste à utiliser le sélecteur de type d’ancre. Par exemple, la règle suivante passe toutes les ancres en rouge :a {color: red;}
• Il existe trois états d’un lien:
  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é.

L'utilisation des sélecteurs de pseudo-classes avec les liens

• Les liens apparaissent par défaut est en bleu soulignées.
• Pour supprimer le trait de soulignement, il suffit d'utiliser la propriété CSS text-decoration et pour changer la couleur on se sert de la propriété CSS de formatage de texte color:

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 */ 
}

Ordre d'application des styles

• il est judicieux d’appliquer les styles de liens dans l’ordre suivant :
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).