Styles des liens
Relooker des liens grâce à CSS
Les styles de cette page de tutoriel n'ayant pas encore été mis à jour, les exemples ne sont pas fonctionnels
Avec le CSS, on peut présenter des nouveaux effets magiques sur les liens. Ceci peut aller du soulignement au non soulignement jusqu'au changement de couleur au survol du pointeur de la souris. C'est ce que nous allons illustrer dans cette partie.
La propriété text-decoration
Comme son nom l'indique la propriété text-decoration est faite pour décorer un texte. Grâce à elle, on a différentes manières de souligner le texte et on peut aussi choisir de ne pas le souligner. Les valeurs applicables sont :
- overline = le texte est souligné en dessus
- underline = le texte est souligné dessous
- line-through = le texte est barré
- blink = le texte clignote (valable que sur Netscape et Firefox)
- none = soulignement annulé et valeur par défaut
La valeur BLINK n'est pas encore applicable sur Internet Explorer donc mettons-le de côté pour l'instant.
Code CSS :
p
{
font-family: arial, verdana, sans-serif;
font-size: 14pt;
}
.dessus
{
text-decoration: overline ;
}
.barre {
text-decoration: line-through;
}
.dessous
{
text-decoration: underline ;
}
Code XHTML :
<p class="dessus"> DESSUS</p> <p class="barre"> BARRE</p> <p class="dessous"> DESSOUS</p>
Des liens non soulignés via CSS
Habituellement, les liens sont soulignés et en bleu en XHTML. Le pouvoir du CSS nous permet de changer le monde.
C'est là qu'intervient la valeur none de text-décoration parce qu'elle permet d'annuler le soulignement automatique du lien. Mais ce n'est pas tout. Désormais on sait comment colorer les textes avec les styles alors pourquoi ne pas colorer les liens ? Essayons toute suite un exemple pour que cela ne soit pas que des illusions.
Code CSS :
a
{
text-decoration: none;
color: red;
}
Code XHTML :
<a href="#">texte de lien magique</a>
Les liens ne sont plus en bleu, ils sont en rouge et non soulignés.
Les pseudo-classes CSS et les liens
Maintenant que l'on a acquis quelques expériences, nous pouvons passer à des choses plus complexes. En utilisant les pseudo-classes ou pseudo-formats avec les liens hypertexte, il est possible de changer l'aspect visuel des textes servant de support à ces liens. Ils sont toujours associés au sélecteur "a". Autrement dit, on peut faire ce qu'on appelle des liens dynamiques. On dit lien dynamique parce qu'on peut changer leur aspect dès qu'un événement se passe.
Afin de voir cela plus clairement, on a subdivisé l'utilisation du pseudo-format en 2 parties pour les liens :
Les Pseudo-format d'ancre
Le pseudo-format d'ancre permet de savoir si les pages associées aux liens ont été visitées ou pas. Cette notion est très pratique dans un sommaire par exemple. Par défaut, le navigateur colore le lien en violet pour dire que la page cible a été vue. On n'est pas obligé de se limiter à cette couleur. En utilisant le pseudo-format a:visited, on peut appliquer les couleurs que l'on veut aux liens qui ont été visités. A l'inverse a:link spécifie la couleur des liens qui n'ont pas été encore visités.
Exemple : Cliquez, et je deviendrai rouge Ne cliquez pas et je resterai vert
Les Pseudo-classes dynamiques avec hover, active et focus
Au passage de la souris
La pseudo classe a:hover change l'apparence du lien quand l'utilisateur passe le pointeur de sa souris au-dessus du lien sans cliquer dessus.
a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-size:24px
}
Ci-dessous, le texte du lien sera surligné en jaune, et coloré en vert quand on pointera dessus.
a:hover
{
background-color: #FFFF00;
color: green;
}
Sur clic
On peut aussi changer l'apparence du lien quand l'utilisateur clique sur le lien. C'est-à-dire entre le moment où l'utilisateur presse le bouton de la souris et le relâche, à l'aide de la pseudo classe a:active.
a:active /* Quand le visiteur clique sur le lien */
{
background-color: #FFCC66;
}
Avec a:focus, le style s'applique lorsque le lien a le focus, c'est-à-dire lorsqu'il est sélectionné. Pour sélectionner un lien, il faut appuyer sur la touche 'TAB' jusqu'à ce qu'il soit sélectionné. A noter que ce style présente des problèmes d'interprétation.
