Bases du CSS
Cet article explique les bases de CSS.
Vous pouvez apprendre les sélecteurs CSS, les combinateurs et la spécificité.
YouTube Video
HTML/CSS pour Aperçu
css-base.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 600px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29 padding-left: 10px;
30 border-left: 2px solid #ccc;
31}
32
33h4 {
34 margin: 0;
35 margin-left: 10px;
36 font-size: 14px;
37}
38
39article section p {
40 margin-left: 40px;
41}
42
43p, pre {
44 margin: 10px 0;
45 padding: 0;
46}
47
48ul, ol, dl, menu {
49 margin: 0;
50}
51
52pre {
53 background-color: #f0f0f0;
54 border-left: 4px solid #ccc;
55 padding: 10px;
56 overflow-x: auto;
57}
58
59.sample-view {
60 border: 1px solid #eee;
61 border-left: 4px solid #eee;
62 padding: 10px;
63 overflow-x: auto;
64}
65
66p.sample, .sample {
67 background-color: #e7f4e9;
68 padding: 10px;
69 border-left: 4px solid #7bbd82;
70 color: #333;
71}
72
73p.sample-error, .sample-error {
74 background-color: #f4e7e7;
75 padding: 10px;
76 border-left: 4px solid lightcoral;
77 color: #333;
78}
79
80.example {
81 background-color: #e0f0ff;
82 padding: 10px;
83 border-left: 4px solid #4a90e2;
84 color: #333;
85}
86
87p.sample-warn, .sample-warn {
88 background-color: #f4f1e7;
89 padding: 10px;
90 border-left: 4px solid #bda97b;
91 color: #333;
92}
93
94code {
95 background-color: #f4f4f4;
96 padding: 2px 4px;
97 border-radius: 4px;
98 font-family: monospace;
99}
100
101span {
102 font-weight: bold;
103}
104
105article {
106 background-color: white;
107 padding: 20px;
108 margin-bottom: 10px;
109 border-radius: 8px;
110 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114 margin-bottom: 20px;
115}
116
117section div {
118 width: 400px;
119 height: 50px;
120 margin: 20px auto;
121 color: white;
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 font-size: 1.2rem;
126 background-color: lightgray;
127 border: 1px solid #ccc;
128}
129
130header h4 {
131 text-align: right;
132 color: #666;
133 font-size: 0.8em;
134 text-decoration: none;
135}
136
137header + pre {
138 margin: 0;
139 margin-top: -20px;
140 padding-top: 14px;
141 font-size: 0.9em;
142}
143
144header + .sample-view {
145 margin: 0;
146 margin-top: -16px;
147}
148
149.sample-view p {
150 margin: 0;
151 padding: 0;
152}css-basics.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Basics</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-basics.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Basics</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Selectors</h2></header>
19 <article>
20 <h3>Universal Selector : *</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24* {
25 font-family:'Courier New', Courier, monospace;
26}
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>Element Selector</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35strong {
36 color: red;
37}
38</pre>
39 <header><h4>HTML</h4></header>
40 <pre>This is <strong>sample</strong> text.</pre>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 This is <strong>sample</strong> text.
44 </section>
45 </section>
46 </article>
47 <article>
48 <h3>ID Selector : #</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52#example1 {
53 color: steelblue;
54}
55</pre>
56 <header><h4>HTML</h4></header>
57 <pre><span id="example1">This is sample text.</span></pre>
58 <header><h4>HTML+CSS</h4></header>
59 <section class="sample-view">
60 <span id="example1">This is sample text.</span>
61 </section>
62 </section>
63 </article>
64 <article>
65 <h3>Class Selector : .</h3>
66 <section>
67 <header><h4>CSS</h4></header>
68<pre class="sample">
69.example1 {
70 background-color: yellow;
71 font-weight: bold;
72}
73</pre>
74 <header><h4>HTML</h4></header>
75 <pre><span class="example1">This is sample text.</span></pre>
76 <header><h4>HTML+CSS</h4></header>
77 <section class="sample-view">
78 <section>
79 <span class="example1">This is sample text.</span>
80 </section>
81 </section>
82 </article>
83 <article>
84 <h3>Attribute Selector : [property=value]</h3>
85 <section>
86 <header><h4>CSS</h4></header>
87<pre class="sample">
88a[href="index.html"] {
89 font-weight: bold;
90}
91</pre>
92 <header><h4>HTML</h4></header>
93<pre>
94<a href="index.html">Home</a><br>
95<a href="about.html">About</a>
96</pre>
97 <header><h4>HTML+CSS</h4></header>
98 <section class="sample-view">
99 <a href="index.html">Home</a><br>
100 <a href="about.html">About</a>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>Descendant Combinator</h3>
106 <section>
107 <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110 text-decoration: underline;
111}
112</pre>
113 <header><h4>HTML</h4></header>
114 <pre><span>This is <strong>sample</strong> text.</span></pre>
115 <header><h4>HTML+CSS</h4></header>
116 <section class="sample-view">
117 <span>This is <strong>sample</strong> text.</span>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>Child Combinator : ></h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127 color: blue;
128}
129</pre>
130 <header><h4>HTML</h4></header>
131<pre>
132This is <em>sample</em> text.<br>
133<span>This is <em>another</em> text.</span><br>
134<span>This text is not <s><em>blue</em></s> in color.</span>
135</pre>
136 <header><h4>HTML+CSS</h4></header>
137 <section class="sample-view">
138 This is <em>sample</em> text.<br>
139 <span>This is <em>another</em> text.</span><br>
140 <span>This text is not <s><em>blue</em></s> in color.</span>
141 </section>
142 </section>
143 </article>
144 <article>
145 <h3> Next Sibling combinator : +</h3>
146 <section>
147 <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150 color: green;
151}
152</pre>
153 <header><h4>HTML</h4></header>
154<pre>
155<span>
156 This is <b>first text</b>.<br>
157 This is <b>second text</b>.<br>
158 <i>This</i> is <b>third text</b>.<br>
159</span>
160</pre>
161 <header><h4>HTML+CSS</h4></header>
162 <section class="sample-view">
163 <span>
164 This is <b>first text</b>.<br>
165 This is <b>second text</b>.<br>
166 <i>This</i> is <b>third text</b>.<br>
167 </span>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>Subsequent Sibling Combinator : ~</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177 color: steelblue;
178}
179</pre>
180 <header><h4>HTML</h4></header>
181<pre>
182<span>
183 This is <b>first text</b>.<br>
184 This is <b>second text</b>.<br>
185 <i>This</i> is <b>third text</b>.<br>
186</span>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <span>
191 This is <b>first text</b>.<br>
192 This is <b>second text</b>.<br>
193 <i>This</i> is <b>third text</b>.<br>
194 </span>
195 </section>
196 </section>
197 </article>
198 <article>
199 <h3>Pseudo Class ":" </h3>
200 <section>
201 <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204 background-color: lightskyblue;
205}
206</pre>
207 <header><h4>HTML</h4></header>
208<pre>
209 <a href="#">Click here</a><br>
210</pre>
211 <header><h4>HTML+CSS</h4></header>
212 <section class="sample-view">
213 <a href="#">Click here</a><br>
214 </section>
215 </section>
216 </article>
217 <article>
218 <h3>Pseudo Element "::" </h3>
219 <section>
220 <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223 content: " ** ";
224 color: red;
225 font-weight: bold;
226}
227</pre>
228 <header><h4>HTML</h4></header>
229<pre>
230 <u>Sample Text</u>
231</pre>
232 <header><h4>HTML+CSS</h4></header>
233 <section class="sample-view">
234 <u>Sample Text</u>
235 </section>
236 </section>
237 </article>
238 </main>
239
240 <main>
241 <header><h2>Inheritance & Priority of CSS</h2></header>
242 <article>
243 <h3>CSS Specificity Rule</h3>
244 <section>
245 <header><h4>CSS Specificity</h4></header>
246 <section class="example">
247 <ol>
248 <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249 <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251 <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252 <li><b>Universal Selector</b>: <code>*</code></li>
253 </ol>
254 </section>
255
256 <header><h4>How Specificity is Calculated</h4></header>
257 <section class="example">
258 <ol>
259 <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260 <li><b>ID Selectors</b>: Worth 100 points each.</li>
261 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262 <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263 </ol>
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>Example of CSS Specificity Rule</h3>
269 <section>
270 <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274 color: blue;
275}
276
277/* Class Selector */
278.header {
279 color: red;
280}
281
282/* Element Selector */
283h1 {
284 color: green;
285}
286</pre>
287 <header><h4>HTML</h4></header>
288 <pre><h1 id="header" class="header">Example of CSS Specificity Rule</h1></pre>
289 <header><h4>HTML+CSS</h4></header>
290 <section class="sample-view">
291 <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292 </section>
293 </section>
294 </article>
295 <article>
296 <h3>Using <code>!important</code> in CSS</h3>
297 <section>
298 <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301 color: blue;
302}
303
304.important-header {
305 color: red !important;
306}
307</pre>
308 <header><h4>HTML</h4></header>
309 <pre><h1 id="important-header" class="important-header">Example of <code>!important</code></h1></pre>
310 <header><h4>HTML+CSS</h4></header>
311 <section class="sample-view">
312 <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313 </section>
314 </section>
315 </article>
316 <article>
317 <h3>CSS Inheritance</h3>
318 <section>
319 <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322 color: gray;
323}
324
325p {
326 color: black;
327}
328</pre>
329 <header><h4>HTML</h4></header>
330<pre>
331<footer>
332 <p>This paragraph's text will be black.</p>
333 <span>This text will be gray.</span>
334</footer>
335</pre>
336 <header><h4>HTML+CSS</h4></header>
337 <section class="sample-view">
338 <footer>
339 <p>This paragraph's text will be black.</p>
340 <span>This text will be gray.</span>
341 </footer>
342 </section>
343 </section>
344 </article>
345 <article>
346 <h3>Cascading Styles</h3>
347 <section>
348 <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351 color: red;
352}
353
354.text {
355 color: blue;
356}
357</pre>
358 <header><h4>HTML</h4></header>
359 <pre><p class="text">This text will be blue.</p></pre>
360 <header><h4>HTML+CSS</h4></header>
361 <section class="sample-view">
362 <p class="text">This text will be blue.</p>
363 </section>
364 </section>
365 </article>
366
367</body>
368</html>Syntaxe de base
1selector {
2 property: value;
3}La structure de base du CSS se compose de sélecteur, propriété et valeur. Chaque paire de propriétés et de valeurs est suivie d'un point-virgule.
sélecteurspécifie à quel élément HTML le style s'applique. Dans cet exemple, les styles sont appliqués à tous les éléments<header>.propriétéspécifie la propriété de style à modifier, comme la couleur ou la taille de police.Paddingetcolorsont les propriétés dans cet exemple.valeurest la valeur attribuée à la propriété. Par exemple, pour la couleur, cela pourrait êtrewhiteou#9cf, et pour la taille de la marge, cela pourrait être20px.
Sélecteurs
Les sélecteurs CSS sont des modèles pour sélectionner des éléments HTML. En utilisant des sélecteurs, vous pouvez appliquer des styles à des éléments spécifiques ou à des groupes d'éléments.
Sélecteur Universel
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*est un sélecteur universel qui s'applique à tous les éléments.- Dans cet exemple, la police de tous les éléments est modifiée.
Sélecteur d'Élément
1/* Element Selector */
2strong {
3 color: red;
4}- Un sélecteur d'éléments est un sélecteur qui s'applique à des balises HTML spécifiques en écrivant le nom de la balise HTML.
- Dans cet exemple, la couleur du texte de l'élément
<strong>est modifiée en rouge.
Sélecteur ID
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#est un sélecteur d'ID utilisé pour sélectionner des éléments par ID.- Les identifiants (ID) sont uniques, donc il ne peut y avoir qu'un seul élément avec le même ID sur une seule page.
Sélecteur de Classe
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.est un sélecteur de classe utilisé pour sélectionner des éléments par classe.- Ajoutez un attribut de classe aux éléments HTML pour appliquer des styles aux éléments qui appartiennent à cette classe.
Sélecteur d'Attribut
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]est un sélecteur d'attribut qui sélectionne les éléments ayant un attribut spécifique.- Dans cet exemple, le texte de l'élément
<a>avec une valeur d'attributhrefdeindex.htmlest mis en gras.
Combinateur
Les combinateurs sont utilisés pour combiner plusieurs sélecteurs afin de sélectionner des éléments ayant des relations spécifiques. Alors qu'un sélecteur sélectionne les éléments individuellement, un combinateur joue le rôle de définir des relations structurelles entre les éléments.
Combinateur de descendant
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- Un combinateur descendant applique des styles à tous les éléments spécifiés à l'intérieur d'un élément particulier.
- Dans cet exemple, un soulignement est appliqué aux éléments
<strong>à l'intérieur des éléments<span>.
Combinateur d'enfant
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}- Le signe
>entrespanetemest utilisé comme combinateur enfant. Dans cet exemple, les styles sont appliqués uniquement aux éléments<em>qui sont des enfants directs des éléments<span>. Dans l'exemple de la troisième ligne, comme il y a une balise<s>entre les balises<span>et<em>, le style n'est pas appliqué.
Combinateur de frères adjacents
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- Le combinatoire de frères et sœurs adjacents utilisant le signe
+applique des styles à un élément frère qui apparaît immédiatement après un certain élément. - Dans cet exemple, la couleur du texte devient verte uniquement si une balise
<b>apparaît immédiatement après une balise<br>.
Combinateur de frères généraux
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- Le combinatoire de frères et sœurs généraux utilisant le signe
~sélectionne tous les éléments frères qui apparaissent après un certain élément. - Dans cet exemple, la couleur du texte de toutes les balises
<b>apparaissant après une balise<br>sera d'une nuance de bleu.
Pseudo-classes
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:est utilisé pour sélectionner les pseudo-classes.- Les détails sur les pseudo-classes seront expliqués dans un autre article.
Pseudo-éléments
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::est utilisé pour sélectionner les pseudo-éléments.- Les détails sur les pseudo-éléments seront également expliqués dans un autre article.
Spécificité CSS
La priorité en CSS est cruciale pour comprendre comment fonctionne le CSS et prévenir des applications de style inattendues. La priorité CSS détermine quelle règle est la plus puissante lorsque plusieurs règles CSS sont appliquées au même élément. La priorité du CSS est principalement déterminée par les facteurs suivants.
- Styles en ligne : Styles écrits directement dans le HTML
- Sélecteurs d'ID ：
#id - Classes, sélecteurs d'attributs, pseudo-classes ：
.class,[attribute=value],:hover, etc - Sélecteurs d'élément ：
div,h1,p, etc - Sélecteur universel ：
*
Plus vous êtes en haut de la liste, plus la priorité est élevée, et plus vous êtes en bas, plus la priorité est faible.
Comment calculer la spécificité
La priorité CSS est calculée en quantifiant le 'poids' de chaque sélecteur. Le poids de chaque sélecteur est représenté comme suit.
- Styles en ligne : Les styles en ligne sont les plus puissants et sont toujours prioritaires.
- Sélecteurs d'ID : Un sélecteur d'ID correspond à '100 points'.
- Classes, sélecteurs d'attributs, pseudo-classes : Ceux-ci correspondent à '10 points'.
- Sélecteurs d'éléments, pseudo-éléments : Ceux-ci correspondent à '1 point'.
La règle ayant le score le plus élevé est appliquée.
Exemple :
1/* ID Selector */
2#header {
3 color: blue;
4}
5
6/* Class Selector */
7.header {
8 color: red;
9}
10
11/* Element Selector */
12h1 {
13 color: green;
14}1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>Ici, la balise <h1> a trois styles différents appliqués :
- Sélecteur d'élément
h1(1 point) - Sélecteur de classe
.header(10 points) - Sélecteur d'ID
#header(100 points)
Dans ce cas, puisque le sélecteur d'ID a la priorité la plus élevée, color: blue est appliqué.
Priorité de remplacement avec !important
Utilisez !important si vous souhaitez forcer un style et ignorer les priorités habituelles. !important a l'influence la plus puissante sur toutes les règles, remplaçant tout le reste.
Exemple :
1#important-header {
2 color: blue;
3}
4
5.important-header {
6 color: red !important;
7}1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>- Ici,
color: red !important;est spécifié, donccolor: redprend la priorité.
Héritage et priorité
Le CSS a la capacité d'hériter des styles des éléments parents vers les éléments enfants. Par exemple, des propriétés comme color et font-family sont héritées par défaut. Cependant, si un élément enfant spécifique est stylé directement, le style appliqué directement prend le pas sur les styles hérités.
Exemple :
1footer {
2 color: gray;
3}
4
5p {
6 color: black;
7}1<footer>
2 <p>This paragraph's text will be black.</p>
3 <span>This text will be gray.</span>
4</footer>- Ici,
color: gray;est appliqué à la balisefooter, mais commecolor: black;est explicitement spécifié pour l'élémentp, le texte de l'élémentps'affiche en noir. Pendant ce temps, l'élémentspanhérite de la propriétécolordufooteret s'affiche en gris.
Cascade CSS et priorité
Comme le nom 'Feuilles de style en cascade (CSS)' l'indique, les styles 'cascadent'. Cela signifie que s'il y a plusieurs feuilles de style ou règles, la dernière règle définie a la priorité. Si les priorités sont les mêmes, le style écrit plus tard est appliqué.
Exemple :
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- Ici,
color: blue;est défini plus tard, donc le texte est affiché en bleu.
Résumé
La priorité du CSS est déterminée en utilisant des algorithmes tels que la spécificité, mais ici nous n'avons considéré que les parties de base.
Les règles de base sont les suivantes :
- Les styles en ligne ont toujours la plus haute priorité.
- Les sélecteurs d'ID sont puissants et ont priorité sur les classes et les balises.
- Les sélecteurs de classe et les pseudo-classes ont un niveau de priorité modéré.
- Les sélecteurs de balise et les pseudo-éléments ont le niveau de priorité le plus bas.
- !important surcharge la priorité normale et applique le style de force.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.