Leçon 6 : 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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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.
Leçon 7: L'identification et le regroupement d'éléments (class et id) >>