> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> HTML / CSS

> Apprenez à créer votre site web avec HTML5 et CSS3

> Les joies de la mise en forme avec CSS

> Création d'apparences dynamiques

> Lecture du tutoriel

Création d'apparences dynamiques

Par

Mathieu Nebra (M@teo21)

Mise à jour : 01/11/2011

Difficulté : Facile Facile

208 199 visites depuis 7 jours, dont 4 652 sur ce chapitre classé 1/786

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.

Nous verrons dans ce chapitre comment changer l'apparence :

au survol ;
lors du clic ;
lors du focus (élément sélectionné) ;
lorsqu'un lien a été consulté.

Vous allez voir que le langage CSS n'a pas fini de nous étonner !

Retour en haut

Sommaire du chapitre :

Au survol
Au clic et lors de la sélection
Lorsque le lien a déjà été consulté
Q.C.M.

Retour en haut

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

a:hover
{
   
}

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

Code : CSS

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

Changement d'apparence au survol de la souris

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 :

Code : CSS

p:hover /* Quand on pointe sur un paragraphe */
{

}

Retour en haut

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 lorsque l'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 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 :

Code : CSS

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

: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 cela, 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

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

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

Retour en 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).

Code : CSS

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

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, 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.

Retour en haut

Q.C.M.

Quel pseudo-format permet d'indiquer un style lorsque la souris pointe sur une balise précise (comme un lien) ?

:hover
:focus
:pointer

Comment faut-il faire pour indiquer un style particulier aux liens ni visités, ni cliqués, ni survolés avec la souris ?

Utiliser le pseudo-format :normal
Utiliser le pseudo-format :standard
Appliquer le style à la balise de lien <a>

Quel pseudo-format permet d'appliquer un style particulier aux liens vers des pages qui ont déjà été vues ?

:seen
:visited
:active

Statistiques de réponses au QCM

Retour en haut

En résumé

En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certains évènements se produisent. On utilise pour cela les pseudo-formats.
Le pseudo-format :hover permet de changer l'apparence au survol (par exemple : a:hover pour modifier l'apparence des liens lorsque la souris pointe dessus).
Le pseudo-format :active modifie l'apparence des liens au moment du clic, :visited lorsqu'un lien a déjà été visité.
Le pseudo-format :focus permet de modifier l'apparence d'un élément sélectionné.

Retour en haut

Retour en haut

93 commentaires pour "Création d'apparences dynamiques"

Note moyenne : 3.85 / 4 (3160 votes)

Pseudo	Commentaire
dyc89	# Posté le 25/02/2012 à 18:42:56
Avis : Très bon	salut. je suis bloqué avec mon IE qui ne fonctionne plus sur mon PC, donc j'utilise les PC des autres pour faire la comparaisons sur le résultat visuel et je constate que IE 7,8 et 9 n'affiche pas le même résultat visuel que Chrome et Mozilla. aide moi
alvine4	# Posté le 16/04/2012 à 19:31:21
	I Like you very much "SiteduZero"......
Ibrahima mouslim	# Posté le 18/04/2012 à 03:46:48
	Bonjour, g voudrais savoir faire , quand on pointe le curseur sur 1 lien et quel possède aussi des sous-lien caché , il ns fait sortir les sous-liens par exemple quand quand je point le curseur sur Emploi sur le site du zéro, il m'affiche : dernière info, info a la une , sans avoir cliqué dessus ! Merci trèèèèèèèèèèèèèèèèèèèè bon tuto
G'orgio	# Posté le 26/04/2012 à 18:32:10
Geek in progrees Avis : Très bon Ville : Montréal Pays : France métropolitaine	@Ibrahima mouslim regarde ça Sans code l'aide est impossible. Quand votre problème est résolue indique le avec la réponse qui vous à aidé.
azizha	# Posté le 27/04/2012 à 12:55:37
Avis : Très bon	merci pour ce tuto ;p j'ai un code html qui va vous résoudre tous les problèmes avec Internet explorer même pour les IE moins 7 qui va leur demander de télécharger d'autre navigateur et pour IE moins que 9 ou pour Mozilla ou n'emporte quelle autre navigateur ancien il va lire votre code html normalement . sans être long voici le code html 5 : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href=".css"/> <meta content="width=device-width, user-scalable=yes initial-scale=1.0" name="viewport" /> <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative; margin-bottom: 20px;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'> Vous utilisez un navigateur ancien.</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'> Pour un bon usage de ce site, nous vous conseillons d'installer l'un des navigateurs récents suivants : </div> </div> <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div> <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'> <img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div> </div> </div> <![endif]-->™ <style> abbr,article,aside,audio,canvas,datalist,details,figure,dialog,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video {display:block;} </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Titre de la page</title> </head> <body> </body> </html> yeahha!!!