Un lien est une connexion d’une page Web à une autre, et CSS peut styliser les liens de différentes manières grâce à différents attributs.
1. Style de lien
Les liens constituent une partie importante d'un site Web. Vous pouvez voir de nombreux liens sur presque toutes les pages Web. Une conception raisonnable des styles de liens peut ajouter des points à l'apparence de la page Web. Les liens ont quatre états différents, à savoir lien, visité, actif et survol. Vous pouvez définir différents styles pour les quatre états du lien via les sélecteurs de pseudo-classe suivants :
(1) a: link => Ceci est un lien normal et non visité.
(2) a : visité => Il s'agit d'un lien que l'utilisateur a visité au moins une fois
(3) a:hover => quand la souris survole, c'est un lien
(4) a : actif => Il s'agit d'un lien sur lequel on vient de cliquer.
grammaire:
a:lien{color:color_name;}color_name peut être dans n'importe quel format, comme un nom de couleur (vert), une valeur hexadécimale (#5570f0) ou une valeur RVB - rgb(25, 255, 2). Il existe un autre état "a:focus" qui est utilisé pour se concentrer lorsque l'utilisateur utilise la touche de tabulation pour parcourir un lien.
Valeur par défaut du lien :
(1) Par défaut, les liens créés sont soulignés.
(2) Lorsque la souris survole le lien, celui-ci se transforme en une icône en forme de main.
(3) Les liens normaux/non visités sont en bleu.
(4) Les liens visités sont colorés en violet.
(5 ) Les liens actifs sont en rouge.
(6) Lorsqu'un lien est focalisé, il est entouré d'un contour.
Par exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Liens CSS</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>Lien simple</a></p></body></html>Les résultats affichés sont les suivants :
2. Comment définir le style du lien avec CSS ?
Voici quelques propriétés CSS de base pour les liens :
(1) attribut de couleur
Cette propriété CSS est utilisée pour changer la couleur du texte du lien.
grammaire:
une{couleur:nom_couleur;}(2) attribut font-family
Cette propriété est utilisée pour changer le type de police du lien à l'aide de la propriété font-family.
grammaire:
une{font-family:nom de famille;}(3) attribut de décoration de texte
Cet attribut est principalement utilisé pour supprimer ou ajouter des soulignements et d'autres modifications aux liens.
grammaire:
une{text-decoration:aucun;}Exemple:
<style>/*Définissez la taille de la police pour améliorer la visibilité*/p{font-size:2rem;}/*Supprimez les soulignements à l'aide de l'attribut text-decoration*/a{text-decoration:none;}/*Vous pouvez également utiliser les styles suivants, ajoutez le soulignement text-decoration:underline;*/</style>(4) attribut de couleur d'arrière-plan
Cette propriété permet de définir la couleur d'arrière-plan du lien.
grammaire:
une{couleur de fond:color_name;}