Introduction aux feuilles de styles CSS
CHAPITRE 3
47
Appelons .sommaire la classe des liens spécifiques. Ceci permet d’écrire une règle qui
leur est propre :
Dans le document, les liens seront alors identifiés comme suit :
apparaîtra en vert, comme défini par la première règle.
apparaîtra en rouge, ainsi que tous les liens de la classe sommaire, par application de
la règle spécifique, qui prend le pas sur le sélecteur général.
Cette classe permettra d’obtenir autant de liens rouges que souhaité.
Rien ne vous contraint à réserver cette classe à l’élément : elle peut s’appliquer à
n’importe quel autre élément. Ainsi, un paragraphe défini comme suit :
sera lui aussi affiché en rouge.
Le nombre de classes utilisées est libre, ainsi que le nombre d’éléments auxquels elles
s’appliquent. Un même élément peut aussi recevoir plusieurs classes.
Supposons que vous mettiez en place la classe titre2 suivante :
.sommaire {
color: red;
}
lien normal
lien rouge
BONNE PRATIQUE Choisir de bons noms de classes
D’une manière générale, on évitera d’opter pour des noms de classes se rapportant à la présentation :
c’est une mauvaise idée.
Supposons par exemple que la classe rouge désigne de nombreux liens d’un site web. Si le webmaster
change d’avis et décide de présenter ces liens en vert, il obtiendra une classe « rouge » correspondant à
une coloration en vert ! C’est si perturbant qu’il n’aura de cesse que de modifier tous ses documents HTML
pour mettre à jour le nom de toutes les classes… ou comment réduire à néant les avantages de CSS.
C’est pourquoi on préférera des noms de classes en rapport avec la structure des éléments qu’ils désignent (par exemple : sommaire, important, menu_haut, en_tete, recherche, etc.)
.titre2 {
text-align: center;
}
CHAPITRE 3
47
Appelons .sommaire la classe des liens spécifiques. Ceci permet d’écrire une règle qui
leur est propre :
Dans le document, les liens seront alors identifiés comme suit :
apparaîtra en vert, comme défini par la première règle.
apparaîtra en rouge, ainsi que tous les liens de la classe sommaire, par application de
la règle spécifique, qui prend le pas sur le sélecteur général.
Cette classe permettra d’obtenir autant de liens rouges que souhaité.
Rien ne vous contraint à réserver cette classe à l’élément : elle peut s’appliquer à
n’importe quel autre élément. Ainsi, un paragraphe défini comme suit :
sera lui aussi affiché en rouge.
Le nombre de classes utilisées est libre, ainsi que le nombre d’éléments auxquels elles
s’appliquent. Un même élément peut aussi recevoir plusieurs classes.
Supposons que vous mettiez en place la classe titre2 suivante :
.sommaire {
color: red;
}
lien normal
lien rouge
BONNE PRATIQUE Choisir de bons noms de classes
D’une manière générale, on évitera d’opter pour des noms de classes se rapportant à la présentation :
c’est une mauvaise idée.
Supposons par exemple que la classe rouge désigne de nombreux liens d’un site web. Si le webmaster
change d’avis et décide de présenter ces liens en vert, il obtiendra une classe « rouge » correspondant à
une coloration en vert ! C’est si perturbant qu’il n’aura de cesse que de modifier tous ses documents HTML
pour mettre à jour le nom de toutes les classes… ou comment réduire à néant les avantages de CSS.
C’est pourquoi on préférera des noms de classes en rapport avec la structure des éléments qu’ils désignent (par exemple : sommaire, important, menu_haut, en_tete, recherche, etc.)
un paragraphe de la même classe
.titre2 {
text-align: center;
}
