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. 🙂

Add a Comment

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
pencil
Le logiciel d’animation gratuit le plus simple du web.

Réaliser des vidéos d'animations avec vos propres dessins n'est pas impossible du tout. Il existe de nombreux logiciels pour cela....

ebook-dahu
Créer une couverture d’ebook 3d gratuite en ligne ?

Que pensez-vous de la couverture 3D de ma formation ? :) Pour réaliser cette couverture d'ebook 3d, je me suis...

video phots vacances
4 sites pour créer des montages vidéos avec vos photos

Pour se raconter ou montrer ses vacances, rien de tel qu'une vidéo. Mais les vidéos sont longues à filmer puis...

Fermer