Les liens et le CSS :

Nous avons vu comment mettre des liens hypertextes en html. Nous avons remarqué que les liens sont par défaut en bleu et soulignés en bleu. Mais il faut savoir que nous pouvons décider nous même comment les liens vont être présentés : en bleu ou non, soulignés ou pas…

Ici nous n’allons pas expliquer ce c’est un lien ou comment faire un lien ; si vous ne savez ce que c’est un lien ou comment mettre un lien hypertexte, rendez vous sur ce cours.

Voyons d’abord le code html de notre lien :
<a href="#">Voici mon lien</a>

Attaquons les propriétés CSS :

a. La couleur du lien

Pour choisir la couleur du lien, nous allons utiliser color
Exemple du code CSS définissant la couleur rouge comme étant la couleur du lien:
a { color:red; }

b. La décoration du lien

Pour définir la décoration du lien, on utilise text-decoration. Il faut noter que text-decoration définit la décoration appliquée au texte. Il peut prendre plusieurs valeurs comme:

line-throug : texte barré
none: aucune décoration
overline: texte surligné
underline: texte souligné
...

Exemple:
code CSS:
a { text-decoration:none; }

c. Au passage de la souris :

Ici nous allons voir ce que deviendrait le lien, si on pointe la souris sur le lien. Pour indiquer au navigateur que telle action se passera au passage de la souris, on utilise hover.

Prenons un exemple auquel nous allons indiquer qu’au passage de la souris, le lien sera noir et souligné.
Code CSS:
a:hover { color:#000000; text-decoration:underline; }

d. Lien visité ou non :

Maintenant nous allons voir comment faire en tel sorte qu’un lien visité soit marqué comme étant visité, c'est-à-dire déterminer la couleur, la décoration (…) du lien déjà visité. Nous pouvons aussi faire la même pour un lien non visité.

Pour le cas d’un lien visité, nous allons utiliser la pseudo-classe visited ; pour le cas d’un lien active, nous allons utiliser la pseudo-classe active.

Prenons un exemple auquel nous allons indiquer qu’un lien visité sera en noir et non souligné, et qu’un lien active sera en rouge et non souligné et enfin le lien normal sera en vert et non souligné.
Code CSS:
a:visited { color:#000000; text-decoration:none; } a:active { color: red; text-decoration: none; } a:link { color: green; text-decoration: none; }