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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: Des CSS lisibles
slug: conflicting/Learn/CSS/First_steps/How_CSS_is_structured
tags:
- CSS
- CSS:Premiers_pas
translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
original_slug: CSS/Premiers_pas/Des_CSS_lisibles
---
<p> </p>
<p>Cette page aborde le style et la grammaire du langage CSS lui-même.</p>
<p>Vous modifierez l'aspect de votre fichier CSS pour le rendre plus lisible.</p>
<h3 id="Information_:_des_CSS__lisibles" name="Information_:_des_CSS__lisibles">Information : des CSS lisibles</h3>
<p>Vous pouvez ajouter des blancs et des commentaires à vos feuilles de style pour les rendre plus lisibles. Vous pouvez également grouper des sélecteurs ensemble, lorsque les même règles s'appliquent à des éléments sélectionnés de manière différente.</p>
<h4 id="Insertion_de_blancs" name="Insertion_de_blancs">Insertion de blancs</h4>
<p>Les feuilles de style peuvent être aérées à l'aide d'espaces, de tabulations et de retours à la ligne. Elles deviendront ainsi plus lisibles.</p>
<p>Votre fichier CSS d'exemple a actuellement une règle par ligne, et à peu près le minimum possible d'espaces blancs. Dans une feuille de style complexe, ce type de mise en page devient rapidement difficile à lire, et rend la feuille difficile à maintenir.</p>
<p>La mise en page à utiliser est généralement une question de préférence personnelle, mais si vos feuilles de style font partie de projets partagés, ceux-ci peuvent avoir leurs propres conventions.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>
Exemples</caption>
<tbody>
<tr>
<td>Certaines personnes aiment la mise en page compacte que nous avons utilisée jusqu'à présent, ne coupant une ligne que lorsqu'elle devient très longue :
<pre>
.carotte {color: orange; text-decoration: underline; font-style: italic;}
</pre>
<p>D'autres préfèrent un couple propriété-valeur par ligne :</p>
<div style="width: 45em;">
<pre class="eval">
.carotte
{
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<p>Certains utilisent une indentation — deux espaces, quatre espaces, ou encore une tabulation :</p>
<div style="width: 45em;">
<pre class="eval">
.carotte {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<p>D'autres apprécient que tout soit aligné verticalement (mais ce type de mise en page est difficile à maintenir) :</p>
<div style="width: 45em;">
<pre class="eval">
.carotte
{
color : orange;
text-decoration : underline;
font-style : italic;
}
</pre>
</div>
<p>Par ailleurs, si certains utilisent des tabulations, d'autres utiliseront uniquement des espaces.</p>
</td>
</tr>
</tbody>
</table>
<h4 id="Commentaires" name="Commentaires">Commentaires</h4>
<p>Les commentaires en CSS commencent avec <code>/*</code> et se terminent par <code>*/</code>.</p>
<p>Vous pouvez utiliser les commentaires pour ajouter vos remarques dans la feuille de style, mais aussi pour <em>mettre en commentaire</em> temporairement certaines parties à des fins de tests.</p>
<p>Pour mettre en commentaire une partie de feuille de style, placez les marques de commentaire de part et d'autre de celle-ci afin que le navigateur l'ignore. Veillez à commencer et à terminer le commentaire à des endroits appropriés, le reste de la feuille de style doit conserver une syntaxe correcte.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>
Exemple</caption>
<tbody>
<tr>
<td>
<div style="width: 45em;">
<pre class="eval">
/* style pour la lettre C initiale dans le premier paragraphe */
.carotte {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
</td>
</tr>
</tbody>
</table>
<h4 id="S.C3.A9lecteurs_group.C3.A9s" name="S.C3.A9lecteurs_group.C3.A9s">Sélecteurs groupés</h4>
<p>Lorsque beaucoup d'éléments ont le même style, vous pouvez spécifier un groupe de sélecteurs en les séparant par des virgules. La déclaration s'applique à chacun des éléments sélectionnés.</p>
<p>Ailleurs dans votre feuille de style, vous pouvez spécifier à nouveau les mêmes sélecteurs individuellement, pour leur appliquer des règles de style uniques.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>
Exemple</caption>
<tbody>
<tr>
<td>Cette règle rend les éléments <small>H1</small>, <small>H2</small> et <small>H3</small> de la même couleur.
<p>Il est pratique de spécifier la couleur en un seul endroit, au cas où celle-ci doit être changée par la suite.</p>
<div style="width: 30em;">
<pre class="eval">
/* couleur pour les titres */
h1, h2, h3 {color: navy;}
</pre>
</div>
</td>
</tr>
</tbody>
</table>
<h3 id="Action_:_ajout_de_commentaires_et_am.C3.A9lioration_de_la_mise_en_page" name="Action_:_ajout_de_commentaires_et_am.C3.A9lioration_de_la_mise_en_page">Action : ajout de commentaires et amélioration de la mise en page</h3>
<p>Éditez votre fichier CSS, et assurez-vous qu'il comporte les règles suivantes (dans n'importe quel ordre) :</p>
<div style="width: 30em;">
<pre class="eval">strong {color: red;}
.carotte {color: orange;}
.epinard {color: green;}
#premier {font-style: italic;}
p {color: blue;}
</pre>
</div>
<p>Rendez-le plus lisible en le réarrangeant d'une manière que vous trouvez logique, et en ajoutant des blancs et des commentaires où vous les trouvez appropriés.</p>
<p>Enregistrez le fichier et actualisez l'affichage de votre navigateur pour vérifier que vos changements n'ont pas affecté le fonctionnement de la feuille de style :</p>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody>
<tr>
<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="color: blue;"><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>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
<caption>
Challenge</caption>
<tbody>
<tr>
<td>Mettez en commentaire une partie de votre feuille de style, sans rien changer d'autre, afin de rendre la toute première lettre de votre document rouge :
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody>
<tr>
<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="color: blue;"><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>
<p>(Il existe plusieurs manières de faire.)</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>Votre feuille de style d'exemple mettait du texte en italique et souligné. La page suivante détaillera d'autres manières de spécifier l'apparence du texte dans votre document : <strong><a href="/fr/docs/CSS/Premiers_pas/Styles_de_texte" title="fr/CSS/Premiers_pas/Styles_de_texte">Styles de texte</a></strong></p>
|
