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.
Contenu
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 :
- 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.
- 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 ».
- 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.
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.
