Le style des liens en CSS
Le style des liens
-
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:
- Survol (
:hover): lorsque le curseur de la souris est placé en haut du lien sans cliquer - Visited (
:visited): Apparition d’un lien sur lequel l’utilisateur a cliqué auparavant lorsque le curseur de la souris ne se trouve pas dessus - 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-decorationet pour changer la couleur on se sert de la propriété CSS de formatage de textecolor: -
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).
- 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.
-
a:active
- La pseudo-classe
:activeest utilisé pour sélectionner et mettre en forme le lien actif. - Un lien devient actif lorsque vous cliquez dessus.
- La pseudo-classe
:activepermet de définir l’aspect des liens au moment du click. -
:focus
- La pseudo-classe
:focuspermet 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.
-
a:visited
- La pseudo-classe
:visitedest 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 :
-
Ordre d’application des styles
- il est judicieux d’appliquer les styles de liens dans l’ordre suivant :
a {
text-decoration: none; /* supprimer les traits de soulignement */
color: green; /* des liens en vert au lieu du bleu */
}Exemple :
a {
text-decoration: none; /* supprimer les traits de soulignement */
color: green; /* des liens en vert au lieu du bleu */
}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 */
}La pseudo-classe
:activepeut être utilisé sur tous les éléments, pas seulement sur les liens.
Exemple :
a:focus {
color: green;
font-size: 1.2em;
}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).
