Liens CSS
Dans ce chapitre, nous allons expliquer comment donner des styles aux liens, comment les rendre plus beaux.
Le lien a ces quatre états:
- a:link - un lien normal, non visité
- a:visited - un lien que l'utilisateur a déjà visité
- a:hover - un lien en survol
- a:active - un lien au moment il est cliqué
Nous allons parler de ces propriétés:
Décoration de texte
Comme vous vous le souvenez, lorsqu'on crée un lien, par défaut il est souligné. Lorsqu'on veut le supprimer, on doit utiliser la propriété text-decoration.
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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> Quelque lien.</a>
</body>
</html>Expliquons la signification de notre code.
Ici vous pouvez voir que notre lien dans son premier et deuxième état sera sans soulignement. Le lien est souligné lorsqu'il est en survol ou au moment il est cliqué.
Vous pouvez vérifier dans notre navigateur avec votre éditeurs ou avec notre éditeur en ligne cliquez ici et allez sur la page de l'éditeur.
Ces styles peuvent être écrits dans la séction <head> ou dans un fichier css que vous voulez utiliser pour la page web.
Couleur
La propriété color est utilisée pour la couleur du lien.
Par exemple, lorsqu'on veut que notre lien soit noir et soit #1c87c9 dans son troisième état (a:hover) on doit écrire le suivant:
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a> C'est quelque lien.</a>
</body>
</html>Couleur de l'arrière-plan
Qu'on peut faire si on veut que le lien ait un arrière-plan?
On doit donner un style avec la propriété background-color.
Par exemple, notre lien sera avec un arrière-plan gris et en survol il sera #1c87c9.
Lorsque le premier (a:link) et le deuxième (a:visited) états ont la même couleur de l'arrière-plan, on peut écrire juste "a".
Voyons le code.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a> C'est un lien.</a>
</body>
</html>Vous pouvez choisir votre couleur préférée avec la Pipette de couleurs.
Pratiquez vos connaissances
