Vidéo: TUTO CSS - #5 Les liens 2025
En général, les navigateurs affichent les liens sous forme de texte souligné en bleu. À l'origine, ce comportement par défaut minimisait la confusion entre le contenu de la page et un lien interactif. Aujourd'hui, presque tous les styles de sites Web sont liés à leur manière. Certains sites ne soulignent pas les liens; d'autres conservent le soulignement mais les liens de style dans des couleurs autres que le bleu; etc.
L'élément d'ancrage HTML (
a
) est utilisé pour créer des liens. Le texte entre les balises d'ancrage d'ouverture et de fermeture est la description du lien, et l'URL définie dans l'attribut
href
est l'adresse que le navigateur consulte lorsque le lien est cliqué.
La balise d'ancrage a évolué au fil du temps et a aujourd'hui quatre états:
-
lien: Un lien sur lequel un utilisateur n'a pas cliqué ou visité -
a visité: A lien sur lequel un utilisateur a cliqué ou visité -
hover: lien que l'utilisateur place sur le curseur de la souris sans cliquer sur -
actif: lien que l'utilisateur a commencé à cliquer mais n'a pas encore publié le bouton de la souris
CSS peut styliser chacun de ces quatre états, le plus souvent en utilisant ces propriétés et valeurs.
| Nom de la propriété | Valeurs possibles | Description |
couleur
|
nom
|
Couleur du lien spécifiée noms (
couleur: bleu;
), code hexadécimal (
couleur: # 0000FF;
) ou valeur RVB (
couleur: rgb (0, 0, 255); >).
text-decoration |
aucun
|
souligner
|
Les exemples de styles ci-dessous sont similaires à ceux utilisés dans les articles de Wikipédia, où les liens apparaissent en bleu par défaut, soulignés en survol de la souris et en orange lorsqu'ils sont actifs. Comme indiqué ci-dessous, le premier lien vers Chief Technology Officer des États-Unis apparaît souligné comme si une souris planait dessus. De plus, le lien vers Google apparaît orange comme s'il était actif et que la souris le cliquait. |
a: lien {
couleur: rgb (6, 69, 173);
text-decoration: aucun;
}
a: visited { couleur: rgb (11, 0, 128)
}
a: hover {
text-decoration: souligné
}
a: active {
couleur: rgb (250, 167, 0)
}
Wikipédia. page org montrant le lien, visité, stationnaire, et les états actifs.
N'oubliez pas d'inclure les deux points entre le sélecteur
et l'état du lien.
Bien que nous n'ayons pas compris la portée de ce livre, les spécifications CSS insistent pour que vous définissiez les différents états des liens dans l'ordre indiqué ici - lien, visité, survol, puis actif.Cependant, il est acceptable de ne pas définir un état de lien, tant que cet ordre est préservé.
Les différents états de liens sont connus sous le nom de
sélecteurs de pseudo-classe
. Les sélecteurs de pseudo-classe ajoutent un mot-clé aux sélecteurs CSS et vous permettent de mettre en forme un état spécial de l'élément sélectionné.
