HTML et web design

Comment changer la couleur des liens sur une page web

Mise à jour : 08/31/2020 par Lojiciels.com

Vous trouverez ci-dessous les étapes à suivre pour changer la couleur des liens affichés sur votre page web en utilisant HTML et CSS. Bien que les couleurs des liens puissent être modifiées avec la balise HTML BODY, nous vous recommandons de toujours effectuer les réglages de style en CSS comme indiqué ci-dessous.

ConseilPour définir la couleur d’un élément de page web, vous devrez peut-être utiliser des codes de couleur HTML. Pour les couleurs principales, vous pouvez également spécifier les noms de ces couleurs au lieu d’utiliser les codes de couleur, par exemple, rouge, bleu, vert et noir au lieu d’utiliser leurs valeurs de code de couleur respectées.

Comprendre les différents types d’hyperliens

Les hyperliens sont des éléments particuliers de votre page, car ils sont interactifs. Pour indiquer qu’ils sont interactifs, ils sont colorés différemment en fonction de leur état. Un hyperlien a trois couleurs spéciales, en plus de sa couleur d’origine, qui représentent trois états différents :

  1. Lien visité – La couleur d’un lien visité. Si un hyperlien est de cette couleur, l’utilisateur peut s’attendre à ce que le fait de cliquer sur le lien l’amène à une page qu’il a déjà vue.
  2. Lien vers le site – La couleur lorsque la souris survole un lien. Si un hyperlien est de cette couleur, l’utilisateur peut s’attendre à ce que le fait d’appuyer sur le bouton gauche de la souris (cliquer), puis de relâcher le bouton, entraîne la visite du lien. La couleur du survol est la même pour les liens « actifs » et « visités ».
  3. Lien actif – La couleur du lien lorsqu’on clique dessus. Lorsque l’utilisateur voit cette couleur, il peut s’attendre à ce que le fait de relâcher le bouton de la souris amène le navigateur à visiter le lien.

Exemple de couleur de lien CSS

Dans l’exemple CSS ci-dessous, nous réglons les couleurs des hyperliens pour qu’ils ressemblent à ce qui est présenté sur cette page. Tout d’abord, toutes les ancres sont réglées sur #2c87f0 (bleu), #636 (violet), et tous les liens actifs et survolés sur #c33 (rouge). Le code ci-dessous peut être ajouté à l’élément de style CSS ou dans votre fichier .css.

a {
  color: #2c87f0;
}
a:visited {
  color: #636;
}
a:hover, a:active, a:focus {
  color:#c33;
}

Si votre page n’utilise pas le CSS, les étapes ci-dessous montrent comment le faire dans la balise HTML BODY. Cependant, comme mentionné précédemment, nous vous recommandons vivement d’utiliser le code CSS ci-dessus au lieu de la balise body. Vous pouvez ajouter le code ci-dessus dans un fichier CSS et lier toutes vos pages web à ce fichier CSS. Ensuite, vous pouvez modifier les valeurs de la couleur de fond dans ce fichier CSS pour changer instantanément la couleur de fond de toutes les pages qui y sont liées.

Exemple de balise HTML body

Dans certaines situations très rares, il peut ne pas être possible d’utiliser le CSS. Dans ce cas, vous pouvez également définir la couleur de fond, la couleur du texte, la couleur du lien et d’autres valeurs dans la balise HTML body, comme indiqué ci-dessous.


Vous trouverez ci-dessous la description de chacun des attributs HTML de la balise body.

Psssssst :  Comment créer un lien HTML à l'aide d'un bouton-poussoir

TEXTE = La couleur du texte.
LINK = La couleur des liens.
VLINK = Couleur du lien visité.
ALINK = Couleur du lien actif ou de la couleur à laquelle le lien change lorsqu’on clique dessus.
BGCOLOR = La couleur de fond de la page.

Afficher plus
Bouton retour en haut de la page

Adblock détecté

Veuillez désactiver votre bloqueur de publicités pour pouvoir visualiser le contenu de la page. Pour un site indépendant avec du contenu gratuit, c’est une question de vie ou de mort d’avoir de la publicité. Merci de votre compréhension! Merci