Liens en CSS

CSS permet de définir les propriétés du lien différemment, selon que le lien est visité, non visité, activé, ou si le curseur le survole. Cela permet d’ajouter des effets plaisants et utiles aux sites Web. Pour contrôler ces effets, on utilise ce qu’on appelle des pseudo-classes.

Une pseudo-classe permet de tenir compte de conditions et événements différents pour la définition d’une propriété sur une balise HTML.
Exp: les liens sont définis en HTML avec des balises a. On peut donc utiliser a comme sélecteur dans CSS :

a { color: blue; }

Un lien est susceptible d’avoir plusieurs états.
Exp: il peut être visité ou non. On peut utiliser des pseudo-classes pour assigner des styles différents aux liens visités et non visités.

a:link { color: blue; } 
a:visited { color: red; } 

On Utilise a:link et a:visited pour les liens non visités et pour ceux visités. Les liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur survole le lien.

La pseudo-classe :link
utilisée pour les liens menant aux pages que l’utilisateur n’a pas visitées.
Exp:

a:link { color: #6699CC; }

La pseudo-classe :visited
Utilisée pour les liens menant aux pages que l’utilisateur a visitées.
Exp:

a:visited { color: #660099; } 

La pseudo-classe :active
La pseudo-classe :active est utilisée pour les liens qui sont activés.
Exp:

a:active { background-color: #FFFF00; }

La pseudo-classe :hover
Utilisée lorsque le pointeur de la souris survole un lien.
Exp:

a:hover { color: orange; font-style: italic; }

Exp 1: l’espacement entre les lettres
On peut ajuster l’espacement entre les lettres avec la propriété letter-spacing. Cela s’applique aux liens pour un effet spécial :

a:hover { letter-spacing: 10px; 
                font-weight:bold;
                color:red; }

Exp2: MAJUSCULES et minuscules
La propriété text-transform permet de basculer entre des lettres majuscules et minuscules. Elle peut aussi servir pour créer un effet sur les liens :

a:hover { text-transform: uppercase; 
	font-weight:bold; 
	color:blue; 
	background-color:yellow; } 

Les deux exemples donnent un aperçu des possibilités de combinaison des différentes propriétés presque illimitées.

Supprimer le trait sous les liens

a { text-decoration:none; } 

On peut fixer la valeur de text-decoration en même temps que celles d’autres propriétés pour les quatre pseudo-classes.

a:link { color: blue; 
	text-decoration:none; } 
a:visited { color: purple; 
	text-decoration:none; } 
a:active { background-color: yellow; 
	text-decoration:none; } 
a:hover { color:red; 
	text-decoration:none; }