Exemple 01 : Décomposition d'une règle CSS : les sélecteurs

Cet élément fait l'objet d'une déclaration s'appliquant uniquement aux éléments div.

Ce paragraphe avec comme nom de classe 'paragraphe' fait l'objet d'une autre déclaration qui s'appliquera à tous les éléments <p> à qui on a attribué une classe avec comme valeur 'paragraphe'.

Vous constatez que le premier style s'applique à tous les éléments <div>.

Ce paragraphe n'a pas de nom de classe, le style ci-dessus ne s'applique donc pas à lui.

Explications :

Dans une règle CSS, le sélecteur correspond à la partie du code se trouvant en dehors des accolades. Il a pour rôle d'indiquer au navigateur ce qui doit être mis en forme. Vous allez indiquer le ou les éléments (X)HTML auxquels une règle CSS va s'appliquer.

Dans cet exemple, la première règle va attribuer une bordure, des marges internes, la couleur blanche au texte et grise à l'arrière-plan de tous les éléments <div>. La seconde règle déclare une taille de texte et la couleur rouge pour tous les paragraphes (balises <p>) possédant l'attribut class avec la valeur 'paragraphe'. Ceux des éléments <p> qui ne possèdent pas d'attribut class avec comme valeur 'paragraphe' se voient appliquer le style par défaut et non le style spécifié pour p.paragraphe.

Code XHTML et CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 01 : Décomposition d'une règle CSS : les sélecteurs</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
div {
        border :           1px solid blue;
        padding :          10px;
        color :            white;
        background-color : gray;
}
p.paragraphe {
        font-size :        1.6em;
        color :            red;
}
</style>
</head>

<body>

<h1>
Exemple 01 : Décomposition d'une règle CSS : les sélecteurs
</h1>

  <div>
Cet élément fait l'objet d'une déclaration s'appliquant uniquement aux éléments div.
  </div>

  <p class="paragraphe">
Ce paragraphe avec comme nom de classe 'paragraphe' fait l'objet d'une autre déclaration qui s'appliquera 
à tous les éléments &lt;p&gt; à qui on a attribué une classe avec comme valeur 'paragraphe'.
  </p>

  <div>
Vous constatez que le premier style s'applique à tous les éléments &lt;div&gt;.
  </div>

  <p>
Ce paragraphe n'a pas de nom de classe, le style ci dessus ne s'applique donc pas à lui.
  </p>

</body>
</html>

Valid XHTML 1.0 Strict CSS Valide !

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.