Vous pouvez appliquer aux liens ce que vous avez deja vu dans les lecons precedentes (c'est-a-dire a changer les couleurs et les polices, les soulignes, etc.). La nouveaute, c'est que CSS permet de definir ces proprietes differemment, selon que le lien est visite, non visite, active, ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles a vos sites Web. Pour controler ces effets, on utilise ce qu'on appelle des pseudo-classes.

Qu'est-ce qu'une pseudo-classe ?

Une pseudo-classe permet de tenir compte de conditions et evenements differents pour la definition d'une propriete sur une balise HTML.

Voyons un exemple. Comme vous le savez, les liens sont definis en HTML avec des balises <a>. On peut donc utiliser a comme selecteur dans CSS :


a {
	color: blue;
}

Un lien est susceptible d'avoir plusieurs etats. Par exemple, il peut etre visite ou non. Vous pouvez utiliser des pseudo-classes pour assigner des styles differents aux liens visites et non visites.


a:link {
	color: blue;
}

a:visited {
	color: red;
}

Utilisez respectivement a:link et a:visited pour les liens non visites et pour ceux visites. Les liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur survole le lien.

Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des explications supplementaires.

La pseudo-classe :link

La pseudo-classe :link est utilisee pour les liens menant aux pages que l'utilisateur n'a pas visitees.


a:link {
	color: #6699CC;
}

La pseudo-classe :visited

La pseudo-classe :visited est utilisee pour les liens menant aux pages que l'utilisateur a visitees. Par exemple, le code suivant donnera la couleur mauve fonce a tous les liens visites :


a:visited {
	color: #660099;
}

La pseudo-classe :active


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

La pseudo-classe :hover

La pseudo-classe :hover est utilisee lorsque le pointeur de la souris survole un lien.

On peut s'en servir pour creer des effets interessants. Par exemple, si nous voulons que nos liens soient orange et en italiques au survol du pointeur, le code CSS devrait etre le suivant :


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

Exemple 1 : Effet au survol du lien par le curseur

Creer des effets differents pour le survol du pointeur sur les liens est tres populaire. Nous examinerons donc quelques exemples de plus pour la pseudo-classe :hover.

Example 1a : Espacement des lettres

Comme indique dans la lecon 5, on peut ajuster l'espacement entre les lettres avec la propriete letter-spacing. Cela s'applique aux liens pour un effet special :


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

Exemple 1b : MAJUSCULES et minuscules

Dans la lecon 5, nous avons vu la propriete text-transform qui permet de basculer entre des lettres majuscules et minuscules. Elle peut aussi servir pour creer un effet sur les liens :


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

Les deux exemples donnent un appercu des possibilites de combinaison des differentes proprietes presque illimitees. Vous pouvez creer vos propres effets, essayez-donc !

Exemple 2 : Supprimer le trait sous les liens

Vous devriez evaluer soigneusement s'il est necessaire de supprimer le souligne car cela pourrait reduire considerablement la convivialite de votre site Web. Le public est habitue aux liens bleus soulignes des pages Web et sait qu'on peut cliquer dessus. Meme ma maman le sait ! Si vous changez le souligne et la couleur des liens, il y a de fortes chances que l'utilisateur s'embrouille et donc n'exploite pas tout le contenu de votre site Web.

Ceci dit, il est tres facile de supprimer le souligne des liens. Comme vous vous en rappelez de la lecon 5, on peut utiliser la propriete text-decoration pour indiquer de souligner le texte ou non. Pour supprimer le souligne, il suffit de lui donner la valeur none.


a {
	text-decoration:none;
}

Autrement, vous pouvez fixer la valeur de text-decoration en meme temps que celles d'autres proprietes 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;
}

Resume

Dans cette lecon, vous avez appris les pseudo-classes, en utilisant quelques proprietes vues dans les lecons precedentes. Cela devrait vous donner une idee des possibilites offertes par CSS.

Dans la lecon suivante, nous vous apprendrons comment definir les proprietes d'elements et de groupes d'elements specifiques.

Lecon 6 : Les liens