# CSS/Regole e sintassi

CSS
Copertina Tutti i moduli · Sviluppo
    Copertina
* Regole e sintassiCSS/Regole_e_sintassi
** SelettoriCSS/Selettori
** CascadeCSS/Cascade
** Unità di misura, ereditarietà e box modelCSS/Unità_di_misura,_ereditarietà_e_box_model
* Supporti di visualizzazione
** Media
** Media con pagine
** Fogli di stile parlati
* Proprietà di baseCSS/Proprietà_di_base
** SfondoCSS/Proprietà_di_base/Sfondo
** Testo baseCSS/Proprietà_di_base/Testo_base
** Testo avanzatoCSS/Proprietà_di_base/Testo_avanzato
** ListeCSS/Liste
** Tabelle
** Animazioni, trasformazioni, transizioni
* Disegnare la struttura della paginaCSS/Disegnare_la_struttura_della_pagina
** PosizionamentoCSS/Posizionamento
* Contenuto generatoCSS/Contenuto generato
* Altre proprietàCSS/Altre_proprietà
* CompatibilitàCSS/Compatibilità
* ReferenceCSS/Reference
Modifica il sommario

## CSS esterni e interni

Gli stili di una pagina possono essere definiti sia all'interno del file nel quale devono operare, sia in un file a parte.
* Gli stili esterni solitamente vengono usati se si hanno molte pagine a cui applicare il medesimo stile. Questo permette di non fare confusione nel lavoro di modifica e revisione.
* Gli stili interni vengono usati se le pagine sui cui operare sono veramente poche o se il sito è semplice (questo sistema è sconsigliato perché nasconde una delle potenzialità dei CSS, ovvero la possibilità di applicarli a più pagine contemporaneamente).
Si noti che i CSS vengono validati dal validatore W3C solamente se sono esterni.

### Stili esterni

Per inserire un collegamento ad uno stile esterno alla pagina, usiamo il tag <link /> nell'intestazione della nostra pagina:
Il seguente sistema di importazione è invece più adatto a risolvere problemi di compatibilità tra vecchi e nuovi browser:

### Stili interni

Questo sistema permette di inserire dei CSS direttamente all'interno della pagina:
Si ricordi che questo sistema non permette la validazione da parte del W3C Validator

## Stili inline

L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo style applicabile ad ogni elemento HTML. Questo sistema, chiamato talvolta stile inline, è utilizzato all'interno degli elementi del codice HTML della pagina e può risultare utile se c'è bisogno di aggiungere uno stile unico per l'elemento.
Se ad esempio si vuole formattare un elemento Fieldset in una pagina HTML, bisogna operare come segue:
In questo caso questo elemento, solo questo nella pagina, avrà il testo al suo interno rosso e grande 14px. Si ricorda che questa modalità è fortemente deprecata dalle più recenti versioni dell'HTML.

## Sintassi fondamentale

Un foglio CSS è semplicemente un insieme di definizioni dello stile da applicare a determinati elementi della pagina. La loro sintassi è:
Le dichiarazioni tra parentesi graffe racchiudono coppie di proprietà : valore separate da un punto e virgola. Ad esempio:
è un foglio di stile con una sintassi valida. In particolare, il valore per la proprietà font-size sarà 12px. Per separare i valori di una stessa proprietà, vengono utilizzate le virgole:

### Commenti

All'interno di un foglio di stile è possibile inserire dei commenti, ossia porzioni di testo che verranno ignorate dal browser, delimitati da /* e */, che si possono estendere su una o più righe.
Questo può risultare utile soprattutto nei casi di collaborazione a coloro che non hanno scritto di prima mano il codice; può però risultare utile anche all'autore stesso, ad esempio per poter riprendere il proprio codice tra le mani dopo un lungo periodo di tempo; inoltre può risultare comodo per eliminare temporaneamente porzioni di codice durante la fase di test delle proprie pagine web.