Personnaliser la couleur des liens avec les CSS [Tuto]

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.

Sommaire :

  • Les différents états d’un lien d’une balise <a>
  • La balise< a> et  les codes CSS pour personnaliser la couleur des liens.
  • Appliquer un CSS à une balise <a> avec un sélecteur. (à lire !)
  • Pour aller plus loin : personnaliser d’autres attributs texte d’un lien.

balise a CSS

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

Un lien peut avoir 4 états différents :

– non visité : link

– visité : visited

– survolé : hover

– cliqué : active

link est l’état initial du lien, visited l’état après le clique, hover l’état lorsque la souris survole le lien et active est l’état au moment du clique.

On peut personnaliser à volonté ces quatre états par une couleur de texte, de fond différente ou en changeant n’importe quel autre attribut CSS s’appliquant à un texte.

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 suivante :

<style type="text/css">
a:link {color:#FF0000;}              /* Lien non visité */
a:visited {color:#00FF00;}          /* Lien visité */
a:hover {color:#FFFF00;}            /* Lien survolé*/
a:active {color:#0000FF;}           /* Lien sélectionné */
</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, plusieurs méthodes sont disponibles: Insérer des css dans HTML

Le lien concerné sera de la forme :

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

Voici un exemple du code précédent :

Lien dont les couleurs du texte sont personnalisées

D’autres attributs peuvent être personnalisé comme la couleur de fond, background ou background-color.

Pour ce faire, il suffit d’ajouter background-color:couleur; dans l’accolade après le point virgule.

Voici un exemple :

<style type="text/css">
a:link {color:#FF0000;background-color:#FF7F7F;}              /* Lien non visité */
a:visited {color:#FF0000;background-color:#FF7F7F;}          /* Lien visité */
a:hover {color:#FFFF00;background-color:#FF00FF;}            /* Lien survolé */
a:active {color:#0000FF;background-color:#FF7F7F;}           /* Lien sélectionné */
</style>

Voici ce que cela donne avec l’exemple juste ci-dessus :

Lien dont les couleurs de fond 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. Comment y remédier ?

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 :

Le lien avec le sélecteur class

<a href="#" class="menu">Lien dont les couleurs du texte sont personnalisées</a>

Pour les CSS à appliquer à la balise a de sélecteur menu :

<style type="text/css">
a.menu:link {color:#FF0000;}              /* Lien non visité */
a.menu:visited {color:#00FF00;}          /* Lien visité */
a.menu:hover {color:#FFFF00;}            /* Lien survolé*/
a.menu:active {color:#0000FF;}           /* Lien sélectionné */
</style>

Comme vous le constatez,on écrit »a.menu ou menu est le nom du sélecteur class= »menu ». Lorsqu’on utilise id= »nom », le CSS s’écrit a#nom.

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

Dans cet article, nous nous sommes intéressés uniquement aux couleurs des liens <a> avec CSS. Mais on pourrait personnaliser d’autres attributs  textes. En voici quelques exemples  pour information.

text-decoration : underline;  (pour souligner ou non)

font-weight:bold;   (texte en gras)

font-spacing:15px;  (écartement des lettres )

etc.

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

Si vous avez aimez cet article, aimez-le aussi sur FaceBook. 🙂

Ces articles pourraient vous intéresser :

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
nombre d'articles publies
Comment afficher le nombre d’articles publiés sur WordPress ?

Voici un petit tutoriel expliquant comment indiquer à vos visiteurs le nombre d'articles publiés sur votre blog Wordpress. Tout est...

story builder google
Créer de jolies animations vidéos texte avec Google Story Builder

Google est plein de surprise. Grâce à son application Story Builder, il est possible de créer des vidéos de dialogues...

Fermer