Article mis à jour le : 05-05-2022
Astuces pour changer la couleur et le comportement des liens en CSSPar défaut dans tout votre site, vous pouvez régler la couleur et le comportement de vos liens. Exemple :
a
{
color: blue;
font-weight:bold;
text-decoration:none;
}a:link
{
color: blue;
font-weight:normal;
}a:visited
{
color: blue;
font-weight:normal;
}Mais il se peut que vous désiriez des spécificités en fonction de certaines zones des pages... Soit une div de classe "contenu". Voici comment modifier les attributs des liens de cette div :
.contenu a:link {color:orange; text-decoration : none;}
.contenu a:visited {color:orange;}
.contenu a:active {color:orange;}
.contenu a:hover {color:orange; font-weight: bold;}Note : si "contenu" avait été l'id de la div et non sa classe, on aurait eu :
#contenu a:link {color:orange; text-decoration : none;} ...Maintenant, imagionons que vous souhaitiez créer une classe spéciale pour certains liens. Par exemple
<a class="MENUTOP">...</a>Vous pouvez définir cette classe comme ceci :
.menuTOP:link {color:white; text-decoration : none;}
.menuTOP:visited {color:white;}
.menuTOP:a:active {color:white;}
.menuTOP:hover {color:white; background-color: black; font-weight: bold;}