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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
---
title: Cascade et héritage
slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance
tags:
- CSS
- CSS:Premiers_pas
translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
original_slug: CSS/Premiers_pas/Cascade_et_héritage
---
<p> </p>
<p>Cette page met en évidence la façon dont les feuilles de style interagissent dans une cascade et comment les éléments héritent leur style de leurs parents.</p>
<p>Vous améliorerez votre feuille de style d'exemple en utilisant l'héritage pour changer le style de nombreuses parties de votre document à la fois.</p>
<h3 id="Information_:_cascade_et_h.C3.A9ritage" name="Information_:_cascade_et_h.C3.A9ritage">Information : cascade et héritage</h3>
<p>Le style final d'un élément peut être spécifié à de nombreux endroits, qui peuvent interagir de manière complexe. C'est ce qui rend CSS puissant, mais peut aussi le rendre déroutant et difficile à déboguer.</p>
<p>Trois sources principales d'information de style forment une cascade.</p>
<p>Celles-ci sont :</p>
<ul>
<li>Le style par défaut du navigateur pour le langage de balisage</li>
<li>Le style spécifié par l'utilisateur lisant le document</li>
<li>Le style lié au document par son auteur</li>
</ul>
<p>Le style de l'utilisateur modifie le style par défaut du navigateur. Le style de l'auteur du document modifie ensuite le style plus avant. Dans ce tutoriel, vous êtes l'auteur de votre document, et vous travaillez uniquement avec des feuilles de style d'auteur.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>
Exemple</caption>
<tbody>
<tr>
<td>Lorsque vous lisez ce document dans votre navigateur, une partie du style visible vient des réglages par défaut de votre navigateur pour HTML.
<p>Une partie du style peut venir de vos paramètres utilisateur dans les Options, ou d'un fichier <code>userContent.css</code> dans le profil de votre navigateur Mozilla.</p>
<p>Enfin, une partie du style provient de feuilles de style liées au document par le serveur wiki.</p>
</td>
</tr>
</tbody>
</table>
<p><br>
Lorsque vous ouvrez votre document d'exemple dans le navigateur, les éléments STRONG sont en gras par rapport au reste du texte. Cela provient du style par défaut du navigateur pour HTML.</p>
<p>Les éléments STRONG sont rouges. Cela provient de votre propre feuille de style.</p>
<p>Les éléments STRONG héritent aussi en grande partie du style de l'élément P, étant ses enfants. De même, l'élément P hérite en grande partie du style de l'élément BODY.</p>
<p>Pour les styles dans la cascade, les feuilles de style de l'auteur ont priorité, ensuite ceux de l'utilisateur et enfin les réglages par défaut du navigateur.</p>
<p>Pour les styles hérités, le style propre d'un nœud enfant a priorité sur le style hérité de son parent.</p>
<p>Ce ne sont pas les seules priorités qui s'appliquent. Une prochaine page du tutoriel expliquera cela plus en détail.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
<caption>
Plus de détails</caption>
<tbody>
<tr>
<td>CSS fournit également une manière pour l'utilisateur de passer outre le style de l'auteur du document, en utilisant le mot-clé <code>!important</code>.
<p>Cela signifie qu'en tant qu'auteur du document, vous ne pouvez pas toujours prédire exactement ce que vos lecteurs verront.</p>
<p>Si vous voulez connaître tous les détails de la cascade et de l'héritage, consultez <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> <span class="comment">note : ce lien existe(ra) peut-être quelque part en français</span> dans la spécification CSS.</p>
</td>
</tr>
</tbody>
</table>
<h3 id="Action_:_utilisation_de_l.27h.C3.A9ritage" name="Action_:_utilisation_de_l.27h.C3.A9ritage">Action : utilisation de l'héritage</h3>
<p>Éditez votre exemple de fichier CSS.</p>
<p>Ajoutez cette ligne à l'aide d'un copier-coller. Que vous la mettiez au dessus ou en dessous de la ligne déjà existante n'a pas grande importance. Cependant, l'ajouter en haut est plus logique étant donné que dans votre document l'élément P est le parent de l'élément STRONG :</p>
<pre>p {color: blue; text-decoration: underline;}
</pre>
<p>Maintenant, actualisez dans votre navigateur pour voir l'effet sur votre document. Le soulignement affecte tout le texte du paragraphe, y compris les lettres initiales. Les éléments STRONG ont hérité du style souligné depuis leur élément parent P.</p>
<p>Mais les éléments STRONG sont toujours rouges. La couleur rouge est leur propre style, il a donc priorité sur la couleur bleue de leur élément parent P.</p>
<table>
<tbody>
<tr>
<td>
<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
<caption>
Avant</caption>
<tbody>
<tr>
<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="border: 2px outset #36b; padding: 1em;">
<caption>
Après</caption>
<tbody>
<tr>
<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>
Challenge</caption>
<tbody>
<tr>
<td>Modifiez votre feuille de style afin que seules les lettres rouges soient soulignées :
<table style="border: 2px outset #36b; padding: 1em;">
<tbody>
<tr>
<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>Si vous avez eu des difficultés à comprendre cette page, ou avez des commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p>
<p>Votre feuille de style d'exemple spécifie des styles pour les balises <code>P</code> et <code>STRONG</code>, qui changent le style des éléments correspondants au sein de votre document. La page suivante explique comment spécifier des styles de manière plus sélective : <b><a href="/fr/docs/CSS/Premiers_pas/Les_s%c3%a9lecteurs">Les sélecteurs</a></b>.</p>
|
