CSS leggibili

  • Revision slug: Conoscere_i_CSS/CSS_leggibili
  • Revision title: CSS leggibili
  • Revision id: 194439
  • Created:
  • Creator: Verruckt
  • Is current revision?
  • Comment /* Cos'altro? */

Revision Content

In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso.

Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile.

Informazioni: CSS leggibili

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.

Spazi bianchi

Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee. Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili.

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.

La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni.

Esempi
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:
.carrot {color: orange; text-decoration: underline; font-style: italic;}

Altri preferiscono il metodo "una proprietà per linea":

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni:

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere):

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

Alcuni usano la tabulazione. Altri solo gli spazi.

Commenti

I commenti nei CSS iniziano con /* e terminano con */.

I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per isolare temporaneamente alcune parti di codice per scopi di test.

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.

Esempio
Un commento vero e proprio:
/* stile per la lettere iniziale C del primo paragrafo */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Un isolamento:

/* isolo una porzione del codice 
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }
 */

Raggruppare i selettori

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.

Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate.

Esempi
Questa regola rende gli elementi H1, H2 e H3 dello stesso colore.

E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica.

/* colore dei titoli */
h1, h2, h3 {color: navy;}

Azione: Aggiungere commenti e migliorare la struttura

Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine):

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}

Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno.

Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile:

Cascading Style Sheets
Cascading Style Sheets


Esercizi
Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa:
Cascading Style Sheets
Cascading Style Sheets

(Esiste più di un modo per ottenere questo risultato.)


Cos'altro?

Il foglio di stile dell'esempio utilizza solamente il testo corsivo (italic) o il testo sottolineato (underline). La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento: Stili del testo

{{ 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" } ) }}

Revision Source

<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 style="font-weight:bold; text-align:left; margin-top:1em;">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 style="font-weight:bold; text-align:left; margin-top:1em;">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 style="font-weight:bold; text-align:left; margin-top:1em;">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 style="font-weight:bold; text-align:left;">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" } ) }}
Revert to this revision