CSS leggibili

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.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Esempi </caption>

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.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Esempio </caption>

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.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Esempi </caption>

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

<caption style="font-weight:bold; text-align:left;">Esercizi </caption>

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

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