Programmation

Personnaliser la couleur des liens avec les CSS

, , , , ,

Pour personnaliser des liens, il n’est pas nécessaire d’utiliser Javascript. La balise <a> et les CSS sont suffisants.
Dans cet article, vous trouverez un petit tutorial sur les liens, les couleurs et  les CSS.  
Vous pourrez ainsi personnaliser vos menus, pour les liens non visités, visités et survolés et créer des effets sur ces liens.

Les différents états d’un lien d’une balise <a>

Un lien peut avoir 5 états différents :

  • link : l’état initial d’un lien avant d’être cliqué
  • visited : l’état du lien lorsqu’il a été visité
  • hover : l’état du lien lorsqu’il est survolé
  • focus : l’état du lien lorsqu’on met le focus dessus, par le clavier ou par programmation
  • active : l’état du lien au moment ou on clique dessus

La balise <a> et  les codes CSS pour personnaliser la couleur des liens.

Pour donner des couleurs différentes aux liens selon leur état, on utiliser la feuilles de style et la propriété color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
a {
padding: 1px 5px 1px 5px;
font-weight: bold;
}
a:link {
  text-decoration: none;
  color: #0000ff;
}
a:visited {
  text-decoration: none;
  color: #437A16;
}
a:focus {
  text-decoration: none;
  color: #ff0000;
}
a:hover {
  text-decoration: none !important;
  background: #cdfeaa;
}
a:active {
  text-decoration: none;
  color: #cdfeaa;
}
</style>

L’ordre dans lequel ces attributs sont déclarés doit être respecté. Les couleurs sont codées ici en hexadécimal, il suffit de les adapter pour votre usage.
Pour intéger ces CSS dans une page HTML, 3 méthodes sont disponibles

Ainsi pour personaliser le lien, il faut commencer par le créer :

1
<a href="chemin/fichier.html" >Lien dont les couleurs du texte sont personnalisées</a>

Voici un exemple d’application du code précédent :

Lien dont les couleurs du texte sont personnalisées

Le problème avec cette façon de faire, c’est que tous les liens des balises <a>  seront affectés par ces CSS. Pour remédier à ce défaut, on peut ajouter un sélecteur de type class, pour identifier la balise à styliser.

Appliquer un CSS à une balise <a> avec avec un sélecteur.

En réalité, dans cet article, je n’ai pas utilisé les codes précédents, sinon tous les liens auraient pris les mêmes couleurs et on n’aurait pas pu appliquer des styles différents aux deux liens des exemples.
Pour différencier les balises <a> entre elles et leur appliquer des CSS différents, on peut utiliser des sélecteurs de la façon suivante : 

1
<center><a href="chemin/fichier.html" class="lien">Lien dont les couleurs du texte sont personnalisées</a></center>

Ce qui donne :

Lien dont les couleurs du texte sont personnalisées

Le code CSS s’écrit ainsi :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
a.lien {
padding: 1px 5px 1px 5px;
font-weight: bold;
}
a:link {
  text-decoration: none;
  color: #0000ff;
}
a:visited {
  text-decoration: none;
  color: #437A16;
}
a:focus {
  text-decoration: none;
  color: #ff0000;
}
a:hover {
  text-decoration: none !important;
  background: #cdfeaa;
}
a:active {
  text-decoration: none;
  color: #cdfeaa;
}color: #CDFEAA;
}
</style>

Il ne vous reste plus qu’à modifier les attributs css à votre guise.

Pour aller plus loin : personnaliser d’autres attributs texte d’un lien.

Dans cet article, nous nous sommes intéressés esseniellement aux couleurs <a> avec CSS.

Mais on pourrait personnaliser d’autres attributs comme ceux liés au texte.

En voici quelques exemples :

text-decoration : underline;  (pour souligner ou non avec none)
font-weight : bold;   (texte en gras)
font-spacing : 15px;  (espacement des lettres )

Pour compléter cet article, sachez qu’il est aussi possible de faire des effets javascript pour les liens.

A bientôt sur Outils Web

Partager