Vidéo: Les feuilles de style CSS (8/15) - Pseudo-classes et pseudo-éléments 2025
L'un des usages les plus courants des styles composés de feuilles de style en cascade (CSS) est de créer des hyperliens personnalisés avec des pseudo-classes, qui peuvent être utilisées pour modifier la couleur et les attributs par défaut des hyperliens.
Le style pseudo-classe du lien hypertexte peut être écrit comme un sélecteur en deux parties où la balise d'ancrage est séparée par un deux-points suivi du nom de l'état du lien, comme dans un lien: a: visited, a: hover, et un: actif.
L'apparence d'un lien hypertexte est déterminée par l'interactivité d'un visiteur avec celui-ci dans un navigateur:
-
Les liens normaux sont des liens non visités.
-
Les liens visités sont des liens sur lesquels le visiteur a déjà cliqué.
-
Les liens de survol changent d'apparence lorsqu'un visiteur passe le curseur sur eux.
-
Les liens actifs changent d'apparence uniquement lorsqu'un visiteur clique directement sur un lien, avant de relâcher le bouton de la souris.
Comme vous le savez, tous les hyperliens par défaut s'affichent soit en texte souligné bleu (lien non-visible), soit en texte souligné en violet (liens visités). Comme il est peu probable que ces couleurs correspondent aux couleurs particulières de la conception de votre site, vous pouvez remplacer les styles de liens par défaut en créant des styles de lien hypertexte personnalisés.
Encore mieux, en plus des états d'hyperliens non visités et visités, avec CSS, vous pouvez ajouter des styles pour deux états d'hyperliens supplémentaires, à savoir l'état hover, qui se produit quand un visiteur passe sur un lien, et l'état actif, qui apparaît lorsqu'un visiteur clique sur un lien.
Pour modifier uniquement la couleur d'un lien hypertexte pour les quatre états de lien, ajoutez les définitions de style suivantes à votre CSS, en remplaçant les valeurs hexadécimales dans cet exemple par les valeurs de couleur souhaitées pour chacun des styles de lien.:
a: lien {color: # CC0000;} a: visité {color: # 339933;} a: hover {couleur: # 000000;} a: actif {color: # 99CC33;}
Pour faire plus choses intéressantes, vous pouvez ajouter des déclarations de style supplémentaires pour l'un ou l'ensemble des quatre états de lien. Par exemple, vous pouvez supprimer le soulignement, ajouter une couleur d'arrière-plan ou appliquer une bordure en pointillés autour du lien hypertexte, comme illustré ci-dessous:
a: link {color: # CC0000;} a: visited {color: # 339933; text-decoration: none;} a: hover {couleur: # 000000; background-color: # 0CC;} a: active {color: #ffffff; text-decoration: aucun; bordure: 2px pointillé #CCC; background-color: # 000;}
Lors de la création de ces styles de liens, vous devez veiller à ce que chaque style soit ajouté au CSS dans le même ordre que sur un site web par un visiteur du site: link, visited, hover, actif.
Si les styles sont ajoutés au CSS dans le désordre, les styles de liens peuvent ne pas fonctionner correctement lorsqu'ils sont affichés dans un navigateur. Par conséquent, prenez l'habitude de créer d'abord l'état normal du lien, puis ajoutez l'état visité suivi de l'état stationnaire, et enfin l'état actif, comme indiqué dans l'exemple précédent.
