Icône Création d'apparences dynamiques

Lire cette page et à la fin faire le QCM et l'exercice. L'objectif est de connaître les balises permettant de réaliser des modifications au survol d'un lien.

 

    C'est une de ses forces : le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois que la page a été chargée. Nous allons faire appel à une fonctionnalité puissante du CSS : les pseudo-formats.

 

Sommaire

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 :

Code : CSS - Sélectionner
1
2
3
4
a:hover
{
   
}


:hover signifie "dessus". a:hover signifie donc : "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 :

Code : CSS - Sélectionner
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
   color: red;
   font-style: italic;
}

a:hover /* Apparence au survol des liens */
{
   text-decoration: underline;
   color: green;
}


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

  • Pour les liens par défaut (non survolés)
  • Pour les liens au survol


Voici ce que ça donne :

Changement d'apparence au survol de la souris

Essayer !



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 :

Code : CSS - Sélectionner
1
2
3
4
p:hover /* Quand on pointe sur un paragraphe */
{

}

Sommaire

Au clic et lors de la sélection

Vous pouvez interagir encore plus finement en CSS. Nous allons voir ici que nous pouvons changer l'apparence des éléments lorsqu'on clique dessus et lorsqu'ils sont sélectionnés !

: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 apparaît 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 lorsqu'on clique dessus :

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

Essayer !


: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é.

C'est-à-dire ?


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

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 :

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

Essayer !


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

 

Sommaire

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

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, on ne peut pas changer beaucoup de choses à part la couleur sur les liens visités.

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


Liens visités en gris

Essayer !



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 (le Site du Zéro y compris !). Une exception notable : Google... ce qui est plutôt pratique, puisqu'on peut voir dans les résultats de ses recherches si on a déjà visité ou non les sites que Google nous présente. ;)

Sommaire