Utiliser les feuilles de style : Lier le style à des éléments

Les exemples que l'on vient de voir à la section précédente montraient comment changer le style d'un élément particulier en utilisant les styles en-ligne ou de tous les éléments d'un même type en définissant un style dans l'entête du document.

On va maintenant s'intéresser à changer toute le style de toute une série d'éléments d'un coup en utilisant la notion de classe et d'identifiant.

Les classes

La plupart des éléments HTML possèdent un attribut class qui permet d'associer l'élément en question à une classe particulière.

Il est ensuite possible de spécifier un style qui s'applique à tous les éléments appartenant à une même classe. Supposons par exemple que l'on défini une classe noprint qui représente des éléments qui ne doivent pas apparaitre lors de l'impression. Tous les éléments qui ne doivent pas être imprimé auront donc l'attribut class avec la valeur noprint.

Vous pouvez voir sur la figure suivante la page vue par un écran et la page vue par l'imprimante. On a bien entendu joué sur la propriété media de l'élément STYLE pour arriver à un tel résultat.

fig h9.3 Les classes d'éléments

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<HTML>

<HEAD>

<TITLE>Utiliser les styles</TITLE>

.noprint {

display: none;

}

</STYLE>

<BODY>

<H1>Liste de navigateurs</H1>

<UL>

<LI>Firefox

<LI>

<LI>Internet Explorer

</UL>

<P class="noprint">Page le 2006-10-27

listing h9.5 Les classes d'éléments

Dans cet exemple, on a donc trois éléments qui appartiennent à la classe noprint : le paragraphe du haut de page, une ligne horizontale et le dernier paragraphe. Tous ces éléments apparaissent à l'écran, mais grâce au style CSS, ils n'apparaitront pas lors de l'impression (display: none; dans un style réservé au média print).

Les identifiants

Contrairement aux classes qui permettent à plusieurs éléments d'appartenir à une même classe, on a les identifiants qui permettent d'identifier un et un seul élément dans le document. On a déjà rencontré les identifiants dans le chapitre 6 sur les formulaires lors de l'utilisation des étiquettes (LABEL).

Comme un identifiant doit être unique dans tout document, il ne peut y avoir deux élément qui ont le même identifiant. La plupart des éléments HTML possèdent un attribut id pour définir un identifiant.

On peut aussi utiliser les identifiants pour préciser un style à appliquer à un élément précis. L'exemple suivant montre comment donner un style différent au paragraphe qui contient la signature.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<HTML>

<HEAD>

<TITLE>Utiliser les styles</TITLE>

#signature {

text-align: right;

font-weight: bold;

}

</STYLE>

<BODY>

<H1>HTML ou XHTML</H1>

<P>XHTML est de l'HTML mais qui se conforme aux normes XML.

<P>...

<P id="signature">John Doe

listing h9.6 Les identifiants

L'unique élément dont l'identifiant est signature est un paragraphe dans notre cas et se verra attribué le style défini dans l'entête du document, à savoir que le texte sera gras et aligné à droite.

fig h9.4 Les identifiants

Bien entendu, la syntaxe pour faire référence à une classe ou à un identifiant dépendra du langage de style utilisé. Dans les exemples que nous avons vu ici, on à utilisé à chaque fois CSS.

Chapitre 10