Les liens

Vous pouvez appliquer aux liens ce que vous avez déjà vu dans les leçons précédentes (c'est-à-dire à changer les couleurs et les polices, les soulignés, etc.). La nouveauté, c'est que CSS permet de définir ces propriétés 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 à vos sites Web. Pour contrôler 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 événements différents pour la définition d'une propriété sur une balise HTML.

Voyons un exemple. Comme vous le savez, 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. Par exemple, il peut être visité ou non. Vous pouvez 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;
 }
 
 

Utilisez respectivement 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.

Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des explications supplémentaires.

La pseudo-classe :link

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

Dans le code suivant, les liens non visités seront en bleu clair.

 
 a:link {
  color: #6699CC;
 }
 
 

• Afficher un exemple

La pseudo-classe :visited

La pseudo-classe :visited est utilisée pour les liens menant aux pages que l'utilisateur a visitées. Par exemple, le code suivant donnera la couleur mauve foncé à tous les liens visités :

 
 a:visited {
  color: #660099;
 }
 
 

• Afficher un exemple

La pseudo-classe :active

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

Cet exemple montre des liens activés dont la couleur d'arrière-plan est jaune :

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

• Afficher un exemple

La pseudo-classe :hover

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

On peut s'en servir pour créer des effets intéressants. Par exemple, si nous voulons que nos liens soient orange et en italiques au survol du pointeur, le code CSS devrait être le suivant :

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

• Afficher un exemple

Exemple 1 : Effet au survol du lien par le curseur

Créer des effets différents pour le survol du pointeur sur les liens est très populaire. Nous examinerons donc quelques exemples de plus pour la pseudo-classe :hover.

Example 1a : Espacement des lettres

Comme indiqué dans la leçon 5, 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;
 }
 
 

• Afficher un exemple

Exemple 1b : MAJUSCULES et minuscules

Dans la leçon 5, nous avons vu la propriété text-transform qui 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;
 }
 
 

• Afficher un exemple

Les deux exemples donnent un aperçu des possibilités de combinaison des différentes propriétés presque illimitées. Vous pouvez créer vos propres effets, essayez-donc !

Exemple 2 : Supprimer le trait sous les liens

On pose souvent la question : « Comment supprimer le trait sous les liens ? »

Vous devriez évaluer soigneusement s'il est nécessaire de supprimer le souligné car cela pourrait réduire considérablement la convivialité de votre site Web. Le public est habitué aux liens bleus soulignés des pages Web et sait qu'on peut cliquer dessus. Même ma maman le sait ! Si vous changez le souligné 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 très facile de supprimer le souligné des liens. Comme vous vous en rappelez de la leçon 5, on peut utiliser la propriété text-decoration pour indiquer de souligner le texte ou non. Pour supprimer le souligné, il suffit de lui donner la valeur none.

 
 a {
  text-decoration:none;
 }
 
 

Autrement, vous pouvez 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;
 }
 
 

• Afficher un exemple

Résumé

Dans cette leçon, vous avez appris les pseudo-classes, en utilisant quelques propriétés vues dans les leçons précédentes. Cela devrait vous donner une idée des possibilités offertes par CSS.

Dans la leçon suivante, nous vous apprendrons comment définir les propriétés d'éléments et de groupes d'éléments spécifiques.