US

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.

Les classes d'éléments
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>
 
        <STYLE type="text/css" media="print">
        .noprint {
         display: none;
        }
        </STYLE>
 
    <BODY>
        <IMG src="http://uko.free.fr/all/images/logo/logo.gif">
 
        <HR><P class="noprint"><A href="editors.htm">Page précédente</A><HR class="noprint">
 
        <H1>Liste de navigateurs</H1>
 
        <UL>
            <LI>Firefox
            <LI>Opéra
            <LI>Internet Explorer
        </UL>
 
        <P class="noprint">Page créé 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>
 
        <STYLE type="text/css" media="all">
        #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.

Les identifiants
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.

  • Espace membre
  • Learning Center
  • Les forums
  • Livre d'or
  • Imprimer
  • Boutique
  • Info
  • Règlement
  • Erreur
  • Newsletter

MyPagerank.Net

Firefox 3.6

Browse Happy logo

Open Clip Art Library

Join our Facebook Group

Twitter

Copyright © 2000-2017 UKO. Toute reproduction strictement interdite sans autorisation du webmaster

Valid XHTML 1.1 !
Valid CSS2 !
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
ICRA Internet Content Rating Association
Creative Commons License
Site optimisé pour Firefox avec une résolution 1024x768 --- Page chargée en 0.0746582 secondes --- This site uses Thumbshots previews