Basi di CSS
Questo articolo spiega le basi di CSS.
Puoi imparare i selettori CSS, i combinatori e la specificità.
YouTube Video
HTML/CSS per l'anteprima
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>Sintassi di Base
1selector {
2 property: value;
3}La struttura di base del CSS consiste in selettore, proprietà e valore. Ogni coppia di proprietà e valori è seguita da un punto e virgola.
selettorespecifica a quale elemento HTML si applica lo stile. In questo esempio, gli stili vengono applicati a tutti gli elementi<header>.proprietàspecifica la proprietà di stile da cambiare, come il colore o la dimensione del carattere.Paddingecolorsono le proprietà in questo esempio.valoreè il valore assegnato alla proprietà. Ad esempio, per il colore potrebbe esserewhiteo#9cf, e per le dimensioni del margine potrebbe essere20px.
Selettori
I selettori CSS sono modelli per selezionare elementi HTML. Utilizzando i selettori, puoi applicare stili a elementi specifici o gruppi di elementi.
Selettore Universale
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*è un selettore universale che si applica a tutti gli elementi.- In questo esempio, il carattere di tutti gli elementi viene modificato.
Selettore di Elemento
1/* Element Selector */
2strong {
3 color: red;
4}- Un selettore di elementi è un selettore che si applica a tag HTML specifici scrivendo il nome del tag HTML.
- In questo esempio, il colore del testo dell'elemento
<strong>viene cambiato in rosso.
Selettore di ID
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#è un selettore ID utilizzato per selezionare elementi per ID.- Gli ID sono unici, quindi può esserci un solo elemento con lo stesso ID su una singola pagina.
Selettore di Classe
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.è un selettore di classe utilizzato per selezionare elementi per classe.- Aggiungi un attributo di classe agli elementi HTML per applicare stili agli elementi che appartengono a quella classe.
Selettore di attributo
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]è un selettore di attributi che seleziona elementi con un attributo specifico.- In questo esempio, il testo dell'elemento
<a>con un valore di attributohrefdiindex.htmlè impostato in grassetto.
Combinatore
I combinatori vengono usati per combinare più selettori al fine di selezionare elementi che hanno relazioni specifiche. Mentre un selettore seleziona gli elementi singolarmente, un combinatore definisce relazioni strutturali tra gli elementi.
Combinatore discendente
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- Un combinatore discendente applica stili a tutti gli elementi specificati all'interno di un determinato elemento.
- In questo esempio, una sottolineatura viene applicata agli elementi
<strong>all'interno di elementi<span>.
Combinatore figlio
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}- Il simbolo
>traspanedemviene usato come combinatore figlio. In questo esempio, gli stili vengono applicati solo agli elementi<em>che sono figli diretti di elementi<span>. Nell'esempio della terza riga, poiché c'è un tag<s>tra i tag<span>e<em>, lo stile non viene applicato.
Combinatore di fratello adiacente
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- Il combinatore fratello adiacente che utilizza il segno
+applica gli stili a un elemento fratello che appare immediatamente dopo un certo elemento. - In questo esempio, il colore del testo diventa verde solo se un tag
<b>appare immediatamente dopo un tag<br>.
Combinatore di fratello generale
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- Il combinatore fratello generale che utilizza il segno
~seleziona tutti gli elementi fratelli che appaiono dopo un certo elemento. - In questo esempio, il colore del testo di tutti i tag
<b>che appaiono dopo un tag<br>sarà una sfumatura di blu.
Pseudo-classi
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:è usato per selezionare le pseudo-classi.- I dettagli sulle pseudo-classi saranno spiegati in un altro articolo.
Pseudo-elementi
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::è usato per selezionare i pseudo-elementi.- Anche i dettagli sugli pseudo-elementi saranno spiegati in un altro articolo.
Specificità CSS
La precedenza in CSS è cruciale per capire come funziona il CSS e per prevenire applicazioni di stile inaspettate. La priorità CSS determina quale regola è più potente quando più regole CSS vengono applicate allo stesso elemento. La priorità del CSS è determinata principalmente dai seguenti fattori.
- Stili inline: Stili scritti direttamente all'interno dell'HTML
- Selettori ID ：
#id - Classi, Selettori di Attributi, Pseudo-classi ：
.class,[attribute=value],:hover, etc - Selettori di Elementi ：
div,h1,p, etc - Selettore Universale ：
*
Più in alto nella lista, maggiore è la priorità, e più in basso, minore è la priorità.
Come Calcolare la Specificità
La priorità del CSS è calcolata quantificando il 'peso' di ciascun selettore. Il peso di ciascun selettore è rappresentato come segue.
- Stili inline: Gli stili inline sono i più potenti e sono sempre prioritari.
- Selettori ID: Un selettore ID corrisponde a '100 punti'.
- Classi, selettori di attributo, pseudo-classi: Corrispondono a '10 punti'.
- Selettori di elementi, pseudo-elementi: Corrispondono a '1 punto'.
La regola con il punteggio più alto viene applicata.
Esempio:
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>Qui, il tag <h1> ha tre stili diversi applicati:
- Selettore di elemento
h1(1 punto) - Selettore di classe
.header(10 punti) - Selettore ID
#header(100 punti)
In questo caso, poiché il selettore ID ha la massima priorità, viene applicato color: blue.
Sovrascrivere la priorità con !important
Usa !important se vuoi forzare uno stile e ignorare le priorità usuali. !important ha l'influenza più potente su tutte le regole, sovrascrivendo tutto il resto.
Esempio:
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>- Qui è specificato
color: red !important;, quindicolor: redha la precedenza.
Ereditarietà e Priorità
CSS ha la capacità di ereditare gli stili dagli elementi genitori agli elementi figli. Ad esempio, proprietà come color e font-family sono ereditate di default. Tuttavia, se un elemento figlio specifico è direttamente stilizzato, lo stile applicato direttamente ha la precedenza sugli stili ereditati.
Esempio:
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>- Qui,
color: gray;viene applicato al tagfooter, ma poichécolor: black;è specificato esplicitamente per l'elementop, il testo dell'elementopviene mostrato in nero. Nel frattempo, l'elementospaneredita la proprietàcolordalfootere appare in grigio.
Cascata CSS e Priorità
Come suggerisce il nome 'Cascading Style Sheets (CSS)', gli stili 'a cascata'. Ciò significa che se ci sono più fogli di stile o regole, l'ultima regola definita ha la precedenza. Se le priorità sono le stesse, viene applicato lo stile scritto successivamente.
Esempio:
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- Qui,
color: blue;è definito più tardi, quindi il testo è visualizzato in blu.
Riepilogo
La precedenza del CSS è determinata utilizzando algoritmi come la specificità, ma qui abbiamo considerato solo le parti basilari.
Le regole di base sono le seguenti:
- Gli stili inline hanno sempre la massima priorità.
- I selettori ID sono potenti e hanno la precedenza su classi e tag.
- I selettori di classe e le pseudo-classi hanno un livello di precedenza moderato.
- I selettori di tag e le pseudo-elementi hanno il livello di precedenza più basso.
- !important sovrascrive la precedenza normale e applica forzatamente lo stile.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.