92
Maîtrise des CSS
les.éléments.pendant.leur.survol,.et.le.second,.:active,.cible.les.éléments.quand.ils.sont.
activés..Dans.le.cas.des.liens,.l’activation.intervient.lorsque.l’utilisateur.clique.dessus..Dans.
cet.exemple,.les.liens.passent.en.rouge.lorsque.l’utilisateur.les.survole.ou.clique.dessus :
a:hover, a:active { color: red;}
Pour.vous.assurer.que.vos.pages.sont.accessibles.du.mieux.possible,.vous.avez.tout.intérêt.
à.ajouter.une.pseudo-classe.:focus.à.vos.liens.lorsque.vous.définissez.vos.états.de.survol..
Elle.permet.aux.liens.de.récupérer.les.mêmes.styles.et,.cela,.qu’on.y.accède.avec.la.touche.
Tab.ou.qu’on.les.survole.avec.le.curseur..
a:hover, a:focus { color: red;}
D’autres.éléments.peuvent.aussi.utiliser.les.sélecteurs.de.pseudo-classe.:hover,.:active.
ou. :focus.. Par. exemple,. vous. pourriez. ajouter. une. pseudo-classe. :hover. aux. lignes. de.
tableau,.une.pseudo-classe.:active.aux.boutons.d’envoi.ou.une.pseudo-classe.:focus.aux.
sement,.à.la.différence.des.navigateurs.modernes,.Internet.Explorer 7.et.ses.versions.antérieures.ne.prennent.en.charge.les.sélecteurs.de.pseudo-classe.que.sur.les.liens.
/* passe les lignes de tableau en jaune lors du survol */
tr:hover {
background: yellow;
}
/* affiche les boutons d’envoi en jaune quand on clique dessus dans certains
„ navigateurs */
input[type="submit"]:active {
background:yellow;
}
/* passe les champs de saisie en jaune lorsqu’ils sont sélectionnés */
input:focus {
background:yellow;
}
La.plupart.des.développeurs.utilisent.ces.sélecteurs.d’abord.pour.désactiver.le.soulignement.
des.liens,.puis.pour.le.réactiver.en.cas.de.survol.ou.de.clic..Il.suffit.pour.cela.d’attribuer.la.
valeur.none.à.la.propriété.text-decoration.des.liens.visités.et.non.visités,.puis.la.valeur.
underline.à.celle.des.liens.actifs.ou.survolés :.
a:link, a:visited {text-decoration: none;}
a:hover, a:focus, a:active {text-decoration: underline;}
L’ordre.des.sélecteurs.est.très.important.dans.cet.exemple..S’il.est.inversé,.les.styles.de.survol.et.de.lien.actif.ne.fonctionnent.pas.
a:hover, a:focus, a:active {text-decoration: underline;}
a:link, a:visited {text-decoration: none;}
Tout.vient.du.système.de.cascade..Au.Chapitre 1,.vous.avez.appris.que.lorsque.deux.règles.
possèdent.la.même.spécificité,.c’est.la.dernière.à.être.définie.qui.prend.le.dessus..Dans.le.
cas.présent,.les.deux.règles.possèdent.la.même.spécificité..Les.styles.:link.et.:visited.
Maîtrise des CSS
les.éléments.pendant.leur.survol,.et.le.second,.:active,.cible.les.éléments.quand.ils.sont.
activés..Dans.le.cas.des.liens,.l’activation.intervient.lorsque.l’utilisateur.clique.dessus..Dans.
cet.exemple,.les.liens.passent.en.rouge.lorsque.l’utilisateur.les.survole.ou.clique.dessus :
a:hover, a:active { color: red;}
Pour.vous.assurer.que.vos.pages.sont.accessibles.du.mieux.possible,.vous.avez.tout.intérêt.
à.ajouter.une.pseudo-classe.:focus.à.vos.liens.lorsque.vous.définissez.vos.états.de.survol..
Elle.permet.aux.liens.de.récupérer.les.mêmes.styles.et,.cela,.qu’on.y.accède.avec.la.touche.
Tab.ou.qu’on.les.survole.avec.le.curseur..
a:hover, a:focus { color: red;}
D’autres.éléments.peuvent.aussi.utiliser.les.sélecteurs.de.pseudo-classe.:hover,.:active.
ou. :focus.. Par. exemple,. vous. pourriez. ajouter. une. pseudo-classe. :hover. aux. lignes. de.
tableau,.une.pseudo-classe.:active.aux.boutons.d’envoi.ou.une.pseudo-classe.:focus.aux.
sement,.à.la.différence.des.navigateurs.modernes,.Internet.Explorer 7.et.ses.versions.antérieures.ne.prennent.en.charge.les.sélecteurs.de.pseudo-classe.que.sur.les.liens.
/* passe les lignes de tableau en jaune lors du survol */
tr:hover {
background: yellow;
}
/* affiche les boutons d’envoi en jaune quand on clique dessus dans certains
„ navigateurs */
input[type="submit"]:active {
background:yellow;
}
/* passe les champs de saisie en jaune lorsqu’ils sont sélectionnés */
input:focus {
background:yellow;
}
La.plupart.des.développeurs.utilisent.ces.sélecteurs.d’abord.pour.désactiver.le.soulignement.
des.liens,.puis.pour.le.réactiver.en.cas.de.survol.ou.de.clic..Il.suffit.pour.cela.d’attribuer.la.
valeur.none.à.la.propriété.text-decoration.des.liens.visités.et.non.visités,.puis.la.valeur.
underline.à.celle.des.liens.actifs.ou.survolés :.
a:link, a:visited {text-decoration: none;}
a:hover, a:focus, a:active {text-decoration: underline;}
L’ordre.des.sélecteurs.est.très.important.dans.cet.exemple..S’il.est.inversé,.les.styles.de.survol.et.de.lien.actif.ne.fonctionnent.pas.
a:hover, a:focus, a:active {text-decoration: underline;}
a:link, a:visited {text-decoration: none;}
Tout.vient.du.système.de.cascade..Au.Chapitre 1,.vous.avez.appris.que.lorsque.deux.règles.
possèdent.la.même.spécificité,.c’est.la.dernière.à.être.définie.qui.prend.le.dessus..Dans.le.
cas.présent,.les.deux.règles.possèdent.la.même.spécificité..Les.styles.:link.et.:visited.