Langage CSS : Pseudo-classes pour liens hypertexte

Généralités liens

Les "Pseudo-classes" avec les liens hypertexte sont toujours associés au sélecteur "a" et permettent de modifier l'aspect visuel des textes servant de support à ces liens. Ils se subdivisent en deux types différents dans ce fichier :

Les "pseudo-classes" bénéficient des règles d'héritage.

- les Pseudo-classes d'ancre avec link et visited

a:link, couleur des liens qui n'ont pas été visités
a:visited, couleur des liens visités.

L'intérêt de ce changement de couleur permet essentiellement de savoir ce que l'on a déjà visité dans une page, et dans un sommaire c'est très utile.

- les Pseudo-classes dynamiques avec hover, active et focus

a:hover, change l'apparence du lien quand l'utilisateur désigne un élément avec le pointeur de sa souris, sans l'activer.
a:active, change l'apparence du lien quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.
a:focus, qui s'applique quand un élément reçoit une couleur de fond, par exemple.

Les liens dont l'utilité n'est pas à démontrer, peuvent dans une page en CSS, présenter de nouveaux effets allant du soulignement au non soulignement jusqu'au changement de couleur au survol du pointeur de la souris.

Je suppose que vous avez ouvert un petit dossier "css.htm" dans lequel vous conservez les exemples expérimentés qui vont encore servir. Je vous rappelle que le dossier de ce tutorial fait à chaque page appel à des règles de CSS en rapport avec le sujet traité et ne devrait pas ainsi perturber le fonctionnement de votre site normal.

Code placé dans le fichier externe du répertoire

<style type="text/css">

body {
font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ; background-color: #FFFFFF ; text-align: justify ; }

a:link { font-weight: bold ; color: black ; }

a:visited {color :black ; }

a:hover { color: red ; text-decoration: none ; }

</style>

... divers META ...
</HEAD>
<BODY BGCOLOR="#FFFFFF" link="#0000FF" ALINK="#0000FF" VLINK="#9900FF" text="#000000" >

La dernière ligne en italique renferme les codes de liens hypertexte HTML, au cas où le visiteur ne pourrait lire le CSS. Les couleurs choisies sont théoriquement le bleu et le violet, quant au soulignement il est placé par défaut.

a:hover = c'est la couleur qui s'affiche quand l'utilisateur pose simplement le pointeur de sa souris sur un élément. Cette couleur de lien change au simple survol du pointeur de la souris sans obligation de cliquer. Si vous placez "a.hover" et "a.active" ce dernier doit se trouver après "a.hover". Il est préférable de ne pas placer les deux à la fois.

Voir le résultat, cliquez HOVER pour visualiser une page spéciale de démonstration.

a:active = qui est appliquée quand l'utilisateur active un élément. C'est le moment où vous appuyez avec le pointeur de la souris sur le lien et le relâchez = vert clair : lime. Ce changement de couleur est dirons nous imperceptible et l'utilisation de ce code n'est pas à mon avis très importante.

a:focus = qui s'applique quand un élément reçoit un effet particulier (celui-ci acceptant les événements du clavier ou d'autres formes d'entrées de texte)

Respectez cette ordre de présentation : :link :visited :hover :active pour éviter des erreurs d'héritage.

Lien 1 vers un fichier du même répertoire

<A HREF="index.htm"> accueil </A>

Lien normal interne

Lien 2 vers un fichier externe

<A HREF="http://www.bravopapi.com."> Accueil bravopapi </A>

Lien vers bravopapi

Pour les liens avec des "ancres" voir page 20.

Lien 3 pour placer un mailto

<a href="mailto:toto@wanadoo.fr"> M'écrire </a>

Lien mailto

(Le lien ouvre une formule de messagerie avec une adresse de destinataire fantaisiste !)

Lien 4 sur une image

Généralités liens