Regole dei CSS

Un documento XHTML viene "stilizzato" specificando un insieme di regole che hanno come obiettivo gli elementi del codice. Si vedrà come fare una regola, quali valori si possono applicare attraverso una regola e come si fa ad applicare queste regole al codice.

Struttura delle regole

Ogni regola inserita nel foglio di stile ha un formato specifico. Un esempio è questo riportato di seguito:

Da notare che è formata da 3 parti: il selettore, la proprietà e il valore.

• Il selettore (che in questo esempio è body) identifica l' elemento o gli elementi del codice XHTML a cui si vuole applicare la regola.
• La proprietà (in questo caso margin) è l' aspetto che abbiamo intenzione di definire per quell' elemento.
• Il valore (0 px) è lo stile esatto che si vuole stabilire per quella proprietà.

Proprietà e valore, insieme, formano la dichiarazione della regola che si trova all' interno delle parentesi graffe. Si possono definire, per ogni regola, dichiarazioni multiple, che vanno separate dal punto e virgola. Ad esempio:

Di solito i fogli di stile sono compilati con una interruzione di riga per ogni dichiarazione, allo scopo di migliorare la leggibilità. Gli spazi bianchi, all'interno di un foglio di stile, vengono ignorati, quindi si possono usare spazi e tabulatori.

Da notare che è stato aggiunto un (;) dopo l' ultima dichiarazione e la } è andata alla riga successiva. Questo rappresenta solo uno stile personale di codifica, non è un requisito della sintassi CSS. Viene scritto in questo modo per facilitare l' aggiunta o rimozione di altre dichiarazioni. Tutta la sintassi di una regola deve essere scritta nel modo corretto, ma spazi bianchi, interruzioni di riga e punti e virgola finali sono concessi.

Scorciatoie sintattiche

I CSS, per migliorare la leggibilità e per ridurne la lunghezza, consentono di esprimere lo stesso concetto in varie forme abbreviate. Ad esempio vedremo 3 regole le quali forniscono lo stesso risultato:
Regola 1

Regola 2

Regola 3

Tutte e 3 le regole definiscono i margini del corpo pari a zero. La prima espressione è la più breve; il valore specificato si applica ai 4 margini. Nella seconda, il valore di ogni margine viene stabilito singolarmente e applicato in senso orario, cominciando dall' alto. La terza è la formula più estesa per descrivere questa regola e la più facile da leggere. C'è un' altra scorciatoia, che offre almeno due vantaggi:

Questa forma abbreviata riflette una "simmetria". Il primo valore si applica ai margini superiori ed inferiori; il secondo a quelli destro e sinistro.
Libera scelta, quindi, nell' impostazione di una regola; non c'è un modo "unico" per crearne una. A prescindere dalla sua complessità, una regola segue sempre la stessa struttura:
selettore {proprietà: valore }.
È una dichiarazione da leggere da sinistra verso destra; descrive quale/i elemento/i sarà o saranno stilizzati, quale aspetto di questo /i elemento/i sarà stilizzato e che forma prenderà lo stile.