Introduction aux feuilles de styles CSS
CHAPITRE 3
49
premier paragraphe d’un bloc). Ces techniques permettent de styler un contenu
n’apparaissant même pas dans le code du document.
Un exemple courant est l’utilisation de la pseudo-classe :hover, qui prend effet
lorsque le pointeur de la souris survole l’élément concerné. Ainsi, la règle suivante
affectera tous les liens de la page lors de leur survol par le pointeur de la souris.
Avec cette instruction, les liens hypertextes – soulignés par défaut – apparaîtront sans
ornement lorsque le pointeur de la souris les survolera.
On peut évidemment utiliser de concert pseudo-classes et classes. Pour n’agir que sur
les éléments de la classe .lien, nous procéderions comme suit :
Ceci affectera donc tous les liens de la classe lien lors de leur survol par le pointeur
de la souris :
Les pseudo-éléments :first-letter et :first-line (qu’Internet Explorer ne
reconnaît qu’à partir de sa version 6) agissent sur la première lettre ou la première
ligne d’un paragraphe, indépendamment de la balise qui structure sinon ce contenu.
Le chapitre consacré aux mises en forme typographiques évoquera d’autres applications pratiques de ces éléments CSS.
a:hover {
text-decoration: none;
}
texte du lien
a.lien:hover {
text-decoration: none;
color: red;
}
texte du lien
COMPATIBILITÉ Internet Explorer et la pseudo-classe :hover
La pseudo-classe :hover permet d’affecter un style particulier lorsque l’élément désigné est survolé. A
priori, cette pseudo-classe n’est pas réservée à l’élément de lien mais peut être appliquée à tous les
éléments ; ainsi est-il possible de modifier la couleur d’arrière-plan d’un bloc entier lors du survol à l’aide
de la souris.
Cependant, jusqu’à sa version 6, Internet Explorer ne prend en charge :hover que lorsqu’elle est appliquée à l’élément . IE7 corrige cette lacune et étend son application à tous les éléments.
CHAPITRE 3
49
premier paragraphe d’un bloc). Ces techniques permettent de styler un contenu
n’apparaissant même pas dans le code du document.
Un exemple courant est l’utilisation de la pseudo-classe :hover, qui prend effet
lorsque le pointeur de la souris survole l’élément concerné. Ainsi, la règle suivante
affectera tous les liens de la page lors de leur survol par le pointeur de la souris.
Avec cette instruction, les liens hypertextes – soulignés par défaut – apparaîtront sans
ornement lorsque le pointeur de la souris les survolera.
On peut évidemment utiliser de concert pseudo-classes et classes. Pour n’agir que sur
les éléments de la classe .lien, nous procéderions comme suit :
Ceci affectera donc tous les liens de la classe lien lors de leur survol par le pointeur
de la souris :
Les pseudo-éléments :first-letter et :first-line (qu’Internet Explorer ne
reconnaît qu’à partir de sa version 6) agissent sur la première lettre ou la première
ligne d’un paragraphe, indépendamment de la balise qui structure sinon ce contenu.
Le chapitre consacré aux mises en forme typographiques évoquera d’autres applications pratiques de ces éléments CSS.
a:hover {
text-decoration: none;
}
texte du lien
a.lien:hover {
text-decoration: none;
color: red;
}
texte du lien
COMPATIBILITÉ Internet Explorer et la pseudo-classe :hover
La pseudo-classe :hover permet d’affecter un style particulier lorsque l’élément désigné est survolé. A
priori, cette pseudo-classe n’est pas réservée à l’élément de lien mais peut être appliquée à tous les
éléments ; ainsi est-il possible de modifier la couleur d’arrière-plan d’un bloc entier lors du survol à l’aide
de la souris.
Cependant, jusqu’à sa version 6, Internet Explorer ne prend en charge :hover que lorsqu’elle est appliquée à l’élément . IE7 corrige cette lacune et étend son application à tous les éléments.