I fogli Stile (CSS)
2. Come è fatto un CSS
Vediamo gli elementi costitutivi di un foglio di stile CSS. Osserviamo questa porzione di codice:
body {
background: white;
color: black;
}
/* Stili per i titoli h1 */
h1 {
color: red;
font: 36px Helvetica, Arial, sans-serif;
}
/* Colore del testo delle liste */
li {color: green;}
/* Colore dei titoli h1 per la stampa */
@media print {
h1 {color: black;}
}
Nel frammento sono presenti le tre tipologie di dichiarazioni che è possibile inserire in un CSS:
- regole;
- commenti;
- direttive @-rules.
Un foglio di stile non è altro che un insieme di regole accompagnate, volendo, da qualche nota di commento e da una o più @-rule. Dal momento che commenti e @-rule sono elementi opzionali e facoltativi, andiamo innanzitutto a spiegare cos’è e com’è fatta una regola, ovvero l’elemento fondamentale di un CSS.
Figura 1 – Struttura di una regola CSSL’illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali:
- il selettore;
- il blocco delle dichiarazioni.
Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <h1>
: lo sfondo sarà rosso, il colore del testo bianco.
Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, la prima di apertura e la seconda di chiusura. Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia:
- proprietà;
- valore.
La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola. Non è obbligatorio, ma è buona norma mettere il punto e virgola anche dopo l’ultima dichiarazione del blocco.
Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.
Gli spazi bianchi lasciati all'interno di una regola non influiscono sul risultato.Nelle definizione delle regole è possibile fare uso di proprietà singole e proprietà a sintassi abbreviata
. Con questa espressione traduciamo il termine inglese shorthand properties, reso spesso, alla lettera, con il termine scorciatoie
.
Le proprietà singole sono la maggior parte. Con esse impostiamo, per un dato elemento o selettore, un singolo aspetto: il colore, la dimensione del testo, il font da utilizzare, etc.
Con le shorthand properties è possibile invece definire con una sola dichiarazione un insieme di proprietà. Chiariamo con un esempio.
Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. È possibile definire per ciascuno di essi un valore usando quattro proprietà singole separate:
margin-top
margin-right
margin-bottom
margin-left
La regola sarebbe questa:
div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
Lo stesso risultato si può ottenere usando la proprietà a sintassi abbreviata margin
:
div {margin: 10px 5px 10px 5px;}
Nel frammento di codice visto aal'inizio le parti racchiuse tra i segni /*
e */
, rappresentano commenti al codice.
/* Stili per i titoli h1 */
/* Colore del testo delle liste */
/* Colore dei titoli h1 per la stampa */
I commenti non sono interpretati dal browser. Sono utili nei CSS, come nei linguaggi di programmazione, per aggiungere annotazioni esplicative di vario tipo a beneficio di chi scrive e consulta il codice.
Le @-rules
Il terzo tipo di dichiarazione che è possibile inserire in un CSS è rappresentato dalla cosiddette direttive @-rules. Il nome deriva dal fatto che questo particolare tipo di istruzione è contrassegnato nella sua definizione dal simbolo/prefisso @
(at):
@media print {
h1 {color: black;}
}
Basti per il momento questa nota sulla definizione sintattica.