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 :
XHTML

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

1 2 3 4

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

a:link

• On va utilisea 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 :

XHTML

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

1 2 3 4

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 :

XHTML

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

1 2 3 4

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 :

XHTML

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

1 2 3 4

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

1 2 3 4

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).

Sommaire du cours CSS