Liens CSS
Dans ce chapitre, nous expliquerons comment styliser les liens et les rendre plus attrayants visuellement.
Le lien possède les états suivants :
a:link- un lien normal, non visitéa:visited- un lien que l'utilisateur a déjà visitéa:hover- un lien survolé par l'utilisateura:active- un lien au moment où il est cliquéa:focus- un lien qui a reçu le focus au clavier
Nous aborderons les propriétés suivantes :
Décoration de texte
Comme vous vous en souvenez, lors de la création d'un lien, celui-ci est souligné par défaut. Pour le supprimer, nous devons utiliser la propriété text-decoration.
Exemple d'utilisation de la propriété text-decoration pour styliser un lien :
Exemples de décoration de texte pour les liens CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> This is some link.</a>
</body>
</html>Expliquons la signification de notre code.
Vous pouvez voir ici que le lien dans ses premier et deuxième états sera sans soulignement. Le lien est souligné lorsque l'utilisateur survole ou clique dessus.
Vous pouvez le vérifier dans votre navigateur en utilisant vos éditeurs ou notre éditeur en ligne.
Ces styles peuvent être écrits soit dans la section <head>, soit dans un fichier CSS que vous utiliserez pour votre page web.
Couleur
Nous utilisons la propriété color pour définir la couleur d'un lien.
Par exemple, si nous voulons que notre lien soit noir par défaut et #1c87c9 dans son troisième état (a:hover), nous devons écrire ce qui suit :
Exemple d'utilisation de la propriété color pour styliser un lien :
Exemples de couleur pour les liens CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Résultat
Couleur de fond
Que pouvons-nous faire si nous voulons que notre lien ait un arrière-plan ?
Il nous suffit d'appliquer la propriété background-color.
Par exemple, notre lien aura un arrière-plan gris et, au survol, il passera à #1c87c9.
Lorsque les premier (a:link) et deuxième (a:visited) états ont la même couleur d'arrière-plan, nous pouvons simplement utiliser a.
Exemple d'utilisation de la propriété background-color pour styliser un lien :
Exemples de couleur de fond pour les liens CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Vous pouvez choisir votre couleur préférée à l'aide du Sélecteur de couleurs.
Pratique
Quelles propriétés sont utilisées en CSS pour modifier l'apparence des liens ?