Création d'apparences dynamiques

Au survol

Nous allons découvrir dans ce chapitre plusieurs pseudo-formats CSS.
Le premier que je vais vous montrer s'appelle :hover. Comme tous les autres pseudo-formats que nous allons voir, c'est une information que l'on rajoute après le nom de la balise (ou de la classe) dans le CSS, comme ceci:

1 a:hover 2 { 3 4 }

:hover signifie « survoler ». a:hover peut donc se traduire par: « Quand la souris est sur le lien » (quand on pointe dessus).

À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens lorsqu'on pointe dessus. Laissez libre cours à votre imagination, il n'y a pas de limite.

Voici un exemple de présentation des liens, mais n'hésitez pas à inventer le vôtre:

1 a /* Liens par défaut (non survolés) */ 2 { 3 text-decoration: none; 4 color: red; 5 font-style: italic; 6 } 7 8 a:hover /* Apparence au survol des liens */ 9 { 10 text-decoration: underline; 11 color: green; 12 }

On a défini ici deux versions des styles pour les liens:

• pour les liens par défaut (non survolés);
• pour les liens au survol.

Le résultat se trouve à la figure suivante.

Sympa, n'est-ce pas?

Même si on l'utilise souvent sur les liens, vous pouvez modifier l'apparence de n'importe quel élément. Par exemple, vous pouvez modifier l'apparence des paragraphes lorsqu'on pointe dessus:

1 p:hover /* Quand on pointe sur un paragraphe */ 2 { 3 4 }

Haut

Au clic et lors de la sélection

:active : au moment du clic

Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens.

Le lien gardera cette apparence très peu de temps : en fait, le changement intervient lorsque le bouton de la souris est enfoncé. En clair, ce n'est pas forcément toujours bien visible.

On peut par exemple changer la couleur de fond du lien lorsque l'on clique dessus:

1 a:active /* Quand le visiteur clique sur le lien */ 2 { 3 background-color: #FFCC66; 4 }

Haut

:focus : lorsque l'élément est sélectionné

Là, c'est un peu différent. Le pseudo-format :focus applique un style lorsque l'élément est sélectionné.

Une fois que vous avez cliqué, le lien reste « sélectionné » (il y a une petite bordure en pointillés autour). C'est cela, la sélection.

À savoir!! Ce pseudo-format pourra être appliqué à d'autres balises HTML que nous n'avons pas encore vues, comme les éléments de formulaires.

Essayons pour l'instant sur les liens:

1 a:focus /* Quand le visiteur sélectionne le lien */ 2 { 3 background-color: #FFCC66; 4 }

À savoir!! Sous Google Chrome et Safari, l'effet ne se voit que si l'on appuie sur la touche Tab.

Haut

Lorsque le lien a déjà été consulté

Il est possible d'appliquer un style à un lien vers une page qui a déjà été vue. Par défaut, le navigateur colore le lien en un violet assez laid (de mon point de vue du moins !).

Vous pouvez changer cette apparence avec :visited (qui signifie « visité »). En pratique, sur les liens consultés, on ne peut pas changer beaucoup de choses à part la couleur (figure suivante).

1 a:visited /* Quand le visiteur a déjà vu la page concernée */ 2 { 3 color: #AAA; /* Appliquer une couleur grise */ 4 }

Si vous ne souhaitez pas que les liens déjà visités soient colorés d'une façon différente, il vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms y compris !).
Une exception notable : Google… ce qui est plutôt pratique, puisque l'on peut voir dans les résultats d'une recherche si on a déjà consulté ou non les sites que Google nous présente.

Haut