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
|
---
title: CSS leggibili
slug: Conoscere_i_CSS/CSS_leggibili
tags:
- Conoscere_i_CSS
translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
---
<p>
</p><p>In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso.
</p><p>Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile.
</p>
<h3 id="Informazioni:_CSS_leggibili" name="Informazioni:_CSS_leggibili"> Informazioni: CSS leggibili </h3>
<p>E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili.
Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile.
</p>
<h4 id="Spazi_bianchi" name="Spazi_bianchi"> Spazi bianchi </h4>
<p>Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee.
Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili.
</p><p>Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose.
</p><p>La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Esempi
</caption><tbody><tr>
<td> Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga:
<pre>
.carrot {color: orange; text-decoration: underline; font-style: italic;}
</pre>
<p>Altri preferiscono il metodo "una proprietà per linea":
</p>
<div style="width: 45em;">
<pre class="eval">.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<p>Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni:
</p>
<div style="width: 45em;">
<pre class="eval">.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<p>Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere):
</p>
<div style="width: 45em;">
<pre class="eval">.carrot
{
color : orange;
text-decoration : underline;
font-style : italic;
}
</pre>
</div>
<p>Alcuni usano la tabulazione. Altri solo gli spazi.
</p>
</td></tr></tbody></table>
<h4 id="Commenti" name="Commenti"> Commenti </h4>
<p>I commenti nei CSS iniziano con <code>/*</code> e terminano con <code>*/</code>.
</p><p>I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per <i>isolare</i> temporaneamente alcune parti di codice per scopi di test.
</p><p>Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento.
Il resto del documento deve continuare ad avere una sintassi corretta.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Esempio
</caption><tbody><tr>
<td>Un commento vero e proprio:
<div style="width: 45em;">
<pre class="eval">/* stile per la lettere iniziale C del primo paragrafo */
.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
<p>Un isolamento:
</p>
<div style="width: 45em;">
<pre class="eval"><b>/*</b> isolo una porzione del codice
.carrot {
color: orange;
text-decoration: underline;
font-style: italic;
}
<b>*/</b>
</pre>
</div>
</td></tr></tbody></table>
<h4 id="Raggruppare_i_selettori" name="Raggruppare_i_selettori"> Raggruppare i selettori </h4>
<p>Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole.
La dichiarazione verrà applicata a tutti gli elementi selezionati.
</p><p>Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Esempi
</caption><tbody><tr>
<td> Questa regola rende gli elementi <small>H1</small>, <small>H2</small> e <small>H3</small> dello stesso colore.
<p>E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica.
</p>
<div style="width: 30em;">
<pre class="eval">/* colore dei titoli */
h1, h2, h3 {color: navy;}
</pre>
</div>
</td></tr></tbody></table>
<h3 id="Azione:_Aggiungere_commenti_e_migliorare_la_struttura" name="Azione:_Aggiungere_commenti_e_migliorare_la_struttura"> Azione: Aggiungere commenti e migliorare la struttura </h3>
<p>Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine):
</p>
<div style="width: 30em;">
<pre class="eval">strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}
</pre>
</div>
<p>Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno.
</p><p>Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile:
</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><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
<caption>Esercizi
</caption><tbody><tr>
<td> Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa:
<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>(Esiste più di un modo per ottenere questo risultato.)
</p>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
<p>Il foglio di stile dell'esempio utilizza solamente il testo corsivo (<i>italic</i>) o il testo sottolineato (<i>underline</i>).
La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento:
<b><a href="it/Conoscere_i_CSS/Stili_del_testo">Stili del testo</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }}
|
