Les feuilles de styles CSS
DEUXIÈME PARTIE
48
On pourra appliquer sur un même élément les différentes classes créées comme suit :
Les identificateurs
Un identificateur (identifiant, ou id) est lui aussi un nom choisi librement (en se
limitant aux caractères alphanumériques classiques). Il se distingue de la classe en ce
qu’il ne peut porter qu’au plus sur un objet du document.
Les sélecteurs CSS s’y réfèrent par l’emploi d’un caractère dièse (#) suivi de son nom
(exemples : #exemple, #toto, #banniere2, etc.). Si par exemple l’une des zones de la
page comporte un encart avec un menu structuré par une balise
DEUXIÈME PARTIE
48
On pourra appliquer sur un même élément les différentes classes créées comme suit :
Les identificateurs
Un identificateur (identifiant, ou id) est lui aussi un nom choisi librement (en se
limitant aux caractères alphanumériques classiques). Il se distingue de la classe en ce
qu’il ne peut porter qu’au plus sur un objet du document.
Les sélecteurs CSS s’y réfèrent par l’emploi d’un caractère dièse (#) suivi de son nom
(exemples : #exemple, #toto, #banniere2, etc.). Si par exemple l’une des zones de la
page comporte un encart avec un menu structuré par une balise
contenant à
son tour plusieurs autres éléments, cette balise sera spécifique à l’encart.
C’est à son niveau qu’il faut intervenir pour appliquer la mise en forme propre à ce
menu (un arrière-plan jaune). On pourra pour cela attribuer à ce
son tour plusieurs autres éléments, cette balise sera spécifique à l’encart.
C’est à son niveau qu’il faut intervenir pour appliquer la mise en forme propre à ce
menu (un arrière-plan jaune). On pourra pour cela attribuer à ce
une classe
(.encart) ou un identificateur (#encart). Cet encart étant unique au document (où
l’on ne trouve aucun autre élément comparable), nous privilégierons la solution de
l’identificateur en écrivant la règle CSS :
Dans le code HTML, on précisera cet identificateur comme suit :
Rappelons que seule cette balise
(.encart) ou un identificateur (#encart). Cet encart étant unique au document (où
l’on ne trouve aucun autre élément comparable), nous privilégierons la solution de
l’identificateur en écrivant la règle CSS :
Dans le code HTML, on précisera cet identificateur comme suit :
Rappelons que seule cette balise
pourra porter l’identificateur encart dans le
code HTML. Celui-ci sera interdit à tous les autres éléments.
Plus un code est rigoureux, moins il laissera passer d’erreurs d’inattention et plus il
sera facile à relire et maintenir. C’est pourquoi on préférera les identificateurs aux
classes à chaque fois qu’il sera possible de les utiliser. Prenez donc le réflexe d’attribuer un identificateur aux objets uniques de votre code. On trouve souvent un bloc
d'en-tête, un bloc publicité, un bloc rubriques annexes, etc. Les paragraphes ou listes
de menus, susceptibles d’apparaître plusieurs fois dans un document HTML, seront
quant à eux qualifiés à l’aide de classes.
Les pseudo-classes et les pseudo-éléments
Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations
qui ne sont pas réalisables en HTML. CSS crée en effet des éléments spécifiques à
certaines actions (comme le survol d’un lien) ou à certaines arborescences (comme le
#encart {
background-color: yellow;
}
code HTML. Celui-ci sera interdit à tous les autres éléments.
Plus un code est rigoureux, moins il laissera passer d’erreurs d’inattention et plus il
sera facile à relire et maintenir. C’est pourquoi on préférera les identificateurs aux
classes à chaque fois qu’il sera possible de les utiliser. Prenez donc le réflexe d’attribuer un identificateur aux objets uniques de votre code. On trouve souvent un bloc
d'en-tête, un bloc publicité, un bloc rubriques annexes, etc. Les paragraphes ou listes
de menus, susceptibles d’apparaître plusieurs fois dans un document HTML, seront
quant à eux qualifiés à l’aide de classes.
Les pseudo-classes et les pseudo-éléments
Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations
qui ne sont pas réalisables en HTML. CSS crée en effet des éléments spécifiques à
certaines actions (comme le survol d’un lien) ou à certaines arborescences (comme le
titre de niveau 2 en rouge et centré
#encart {
background-color: yellow;
}
contenu de l’élément