-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
231 lines (231 loc) · 10.9 KB
/
index.html
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Intro CSS – Codebabes</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<main id="content">
<h1 role="heading" aria-level="1">
Codebabes – Intro à CSS
</h1>
<p class="highlight">
<abbr title="Cascading Style Sheets">CSS</abbr> (<i>Cascading Style Sheets</i> ou <i>Feuilles de Style en Cascade</i> en français) est le langage utilisé pour contrôler la présentation des pages web dans le navigateur. Le navigateur applique les déclarations CSS aux éléments sélectionnés pour les styler.
</p>
<section id="s1" aria-labelledby="s1h">
<h2 id="s1h" role="heading" aria-level="2">
La syntaxe du CSS
</h2>
<p>
Une <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Les_bases/La_syntaxe">règle CSS</a> est un ensemble de déclarations CSS associées à un sélecteur.
</p>
<figure>
<img src="img/regle-css.svg" alt="">
<figcaption>Une règle CSS : un sélecteur et son bloc de déclarations, chacune constituée d’un couple propriété - valeur</figcaption>
</figure>
<section id= "s11" aria-labelledby="s11h">
<h3 id="s11h" role="heading" aria-level="3">
Les sélecteurs
</h3>
<p>
Le <dfn class="principal">sélecteur</dfn> sert à cibler l’élément qu’on veut styler dans le code HTML.
</p>
<p>
Il existe de nombreux types de sélecteurs en CSS :
</p>
<ul>
<li>
le <dfn class="principal">sélecteur de type ou sélecteur de balise</dfn> : c’est le plus simple, c’est juste le nom d’une balise. Il cible tous les éléments qui portent ce nom de balise ;
</li>
<li>
le <dfn class="principal">sélecteur d’id</dfn>, identifé par le symbole <code class="principal">#</code>, qui cible un élément sur base de la valeur de son attribut <code>id</code> ;
</li>
<li>
le <dfn class="principal">sélecteur de classe</dfn>, identifé par le symbole <code class="principal">.</code>, qui cible un élément sur base de la valeur de son attribut <code>class</code> ;
</li>
<li>
le <dfn class="principal">sélecteur de pseudo-classe</dfn>, identifé par le symbole <code class="principal">:</code>, qui cible un élément sur base d’une pseudo-classe ;
</li>
<li>
le <dfn class="principal">sélecteur multiple</dfn>, constitué de plusieurs sélecteurs séparés par l'opérateur <code class="principal">,</code> (VIRGULE) qui signifie ET ;
</li>
<li>
le <dfn class="principal">sélecteur contextuel ou sélecteur de descendant</dfn>, constitué d’un parent suivi de l'opérateur ESPACE suivi d'un enfant, qui se lit de droite à gauche et qui cible un élément descendant d’un élément dans l'arbre logique du document ;
</li>
<li>
le <dfn class="principal">sélecteur universel</dfn>, identifé par le symbole <code class="principal">*</code>, qui cible tous les éléments de la page ;
</li>
<li>
etc.
</li>
</ul>
</section> <!-- #s11 -->
<section id= "s12" aria-labelledby="s12h">
<h3 role="heading" aria-level="3">
Le bloc de déclarations
</h3>
<p>
Le <dfn class="principal">bloc de déclarations</dfn> sert à appliquer le style à l’élément ciblé. Il est délimité par les <i class="principal">accolades</i> (<b><code class="principal">{ }</code></b>) et peut comporter plusieurs déclarations CSS.
</p>
<p>
Chaque déclaration CSS sert à changer un des paramètres de style (la couleur de texte, la couleur de fond, la taille de texte, …). Elle se termine par un <i class="principal">point-virgule</i> (<b><code class="principal">;</code></b>).
</p>
<p>
Chaque déclaration se décompose en deux parties :
</p>
<ul>
<li>
une propriété ;
</li>
<li>
une valeur ;
</li>
<li>
la propriété est séparée de la valeur par le symbole <i class="principal">deux points</i> (<b><code class="principal">:</code></b>).
</li>
</ul>
<section id= "s121" aria-labelledby="s121h">
<h4 id= "s121h" class="secondary" role="heading" aria-level="4">
La propriété
</h4>
<p>
La <dfn class="secondary">propriété</dfn> sert à préciser quel paramètre on veut modifier.
</p>
<p>
Les propriétés sont des mots-clés du langage CSS (elles sont listées par ordre alphabétique dans le <i>Pocket Reference</i>). Il en existe un grand nombre, par exemple :
</p>
<ul>
<li>
<code class="secondary">color</code> pour changer la couleur de texte ;
</li>
<li>
<code class="secondary">background-color</code> pour changer la couleur de fond ;
</li>
<li>
<code class="secondary">font-size</code> pour changer la taille du texte ;
</li>
<li>
<code class="secondary">line-height</code> pour changer la hauteur de l’interligne ;
</li>
<li>
etc.
</li>
</ul>
</section> <!-- #s121 -->
<section id= "s122" aria-labelledby="s122h">
<h4 id= "s122h" class="secondary" role="heading" aria-level="4">
La valeur
</h4>
<p>
La <dfn class="secondary">valeur</dfn> sert à préciser ce qu’on a choisi pour la propriété.
</p>
<p>
Il existe un grand nombre de valeurs possibles en CSS, en fonction des propriétés, par exemple :
</p>
<ul>
<li>
des valeurs de couleur comme <code class="secondary">red</code> (couleur nommée), ou <code class="secondary">#FF0000</code> (couleur héxadécimale), ou <code class="secondary">rgb(255,0,0)</code> (couleur RVB), ou <code class="secondary">rgba(255,0,0,.5)</code> (couleur RVB avec une couche de transparence) pour des propriétés qui servent à définir une couleur comme par exemple <code class="secondary">color</code> ou <code class="secondary">background-color</code> ;
</li>
<li>
des valeurs de taille (un chiffre) avec une unité comme <code class="secondary">px</code> ou <code class="secondary">em</code> ou <code class="secondary">%</code> (par exemple <code class="secondary">12px</code>) pour des propriétés qui servent à définir des dimensions comme par exemple <code class="secondary">font-size</code> ou <code class="secondary">width</code> ;
</li>
<li>
etc.
</li>
</ul>
</section> <!-- #s122 -->
</section> <!-- #s12 -->
</section> <!-- #s1 -->
<section id="s2" aria-labelledby="s2h">
<h2 id= "s2h" role="heading" aria-level="2">
Le modèle de boîte en CSS
</h2>
<p class="highlight">
<strong>Toute balise HTML est une boîte en CSS</strong>. Un <code>p</code> est une boîte, un <code>div</code> est une boîte, un <code>h1</code> est une boîte, un <code>ul</code> est une boîte, un <code>li</code> est une boîte, un <code>a</code> est une boîte, un <code>em</code> est une boîte, …
</p>
<p>
Les boîtes correspondant aux différentes balises HTML imbriquées dans l’arbre logique du document s’emboîtent les unes dans les autres comme des poupées russes.
</p>
<figure>
<img src="img/html5-imbrication-boites.png" alt="">
<figcaption>Les boîtes CSS correspondant aux différentes balises HTML imbriquées</figcaption>
</figure>
<p>
Chaque boîte est composée de quatre éléments :
</p>
<ul>
<li>une zone de contenu ;</li>
<li>un <code>padding</code> (ou marge interne) ;</li>
<li>un <code>border</code> ;</li>
<li>un <code>margin</code> (ou marge externe).</li>
</ul>
<figure>
<img src="img/modele-boite-3.svg" alt="">
<figcaption>Le modèle de boîte : contenu, padding, bordure, margin</figcaption>
</figure>
<section id="s21" aria-labelledby="s21h">
<h3 id="s21h" role="heading" aria-level="3">
La zone de contenu
</h3>
<p>
La <dfn class="principal">zone de contenu</dfn> est la zone qui contient le texte proprement dit, ou l’image s’il s’agit d’une balise qui affiche une image.
</p>
<p>
Dans le <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">modèle de boîte standard</a>, la taille de la zone de contenu est définie par les propriétés <code class="secondary">width</code> (pour la largeur) et <code class="secondary">height</code> (pour la hauteur).
</p>
<p class="highlight">
<strong>Attention</strong> : Fixer la hauteur d’une zone de contenu qui contient du texte (propriété <code class="secondary">height</code>) est une très mauvaise pratique, à éviter absolument.
</p>
</section> <!-- #s21 -->
<section id="s22" aria-labelledby="s22h">
<h3 id="s22h" role="heading" aria-level="3">
Le padding
</h3>
<p>
Le <dfn class="principal">padding</dfn>, ou <i>marge interne</i> est la zone qui sépare le contenu de la bordure. Il prend la couleur de fond de l’élément.
</p>
</section> <!-- #s22 -->
<section id="s23" aria-labelledby="s23h">
<h3 id="s23h" role="heading" aria-level="3">
Le border
</h3>
<p>
Le <dfn class="principal">border</dfn> est la bordure qui entoure l’élément. On peut définir son style (trait plein, pointillé, …), son épaisseur, sa couleur.
</p>
</section> <!-- #s23 -->
<section id="s24" aria-labelledby="s24h">
<h3 id="s24h" role="heading" aria-level="3">
Le margin
</h3>
<p>
Le <dfn class="principal">margin</dfn>, ou <i>marge externe</i>, assure la séparation entre les éléments. La marge externe est transparente, de sorte qu’elle aura la couleur de son élément parent.
</p>
</section> <!-- #s24 -->
<section id="s25" aria-labelledby="s25h">
<h3 id="s25h" role="heading" aria-level="3">
L’équation du modèle de boîte
</h3>
<p>
Dans le modèle de boîte standard, la largeur totale de la boîte se calcule selon l’équation suivante :
</p>
<figure>
<img src="img/modele-boite-equation.svg" alt="">
<figcaption>Illustration de l’équation du modèle de boîte</figcaption>
</figure>
<p class="equation">
<dfn class="principal">Largeur totale visible</dfn> = <code>border-left</code> + <code>padding-left</code> + <code class="secondary">width</code> + <code>border-right</code> + <code>padding-right</code>
</p>
<p class="equation">
<dfn class="principal">Largeur totale</dfn> = <code>margin-left</code> + <span>largeur totale visible</span> + <code>margin-right</code>
</p>
</section> <!-- #s25 -->
</section><!-- #s2 -->
</main>
<footer id="footer">
<p>
<small>© Tous droits réservés</small>
</p>
</footer>
</body>
</html>