Nella seconda lezione della nostra guida abbiamo visto come utilizzare i CSS all’interno di un documento HTML. Abbiamo visto, infatti, che è possibile applicare regole all’interno dei singoli tag HTML (stile inline), definire fogli di stili interni al documento o importare fogli di stile esterni e separati mediante un semplice link.
Quello che non abbiamo ancora visto è come è strutturato un CSS, cioè qual’è la sua sintassi di base. In questa lezione colmeremo questa mancanza spiegando, appunto, quali sono gli elementi costitutivi di questo linguaggio. Per partire vediamo un semplice esempio di un ipotetico foglio di stile:
a { color: #00FF00; text-decoration: none; }
p { color: #FF0000; }Nel nostro esempio sono presenti due regole: la prima riguarda tutti i link della pagina, la seconda regola riguarda i paragrafi.
Regole e Proprietà
Le regole sono l’elemento principale di cui è costituito un qualsivoglia foglio di stile (possiamo dire che un foglio di stile è un insieme di regole CSS).
La sintassi di una regola è la seguente (da destra verso sinistra):
- selettore: serve per definire il o gli elementi a cui applicare un dato stile; nel nostro esempio abbiamo utilizzato il semplice nome di due tag ma, come vedremo più avanti, solitamente si utilizza il riferimento a ID o classi;
- { e }: all’interno delle parantesi graffe viene specificato il blocco delle dichiarazioni:
- ogni dichiarazione è composta da un’accoppiata di proprietà e corrispondente valore; questi due elementi sono congiunti mediante l’operatore di assegnazione due punti (:) che viene posto dopo la proprietà;
- qualora le dichiarazioni siano più di una, le diverse coppie chiave/valore vengono separate con un punto e virgola.
In relazione a questa regola:
p { color: #FF0000; }- p: è il selettore;
- {: apro il blocco delle dichiarazioni;
- color: è la proprietà che definisce il colore;
- #FF0000: è il valore della proprietà color;
- }: chiudo il blocco delle dichiarazioni.
Si noti che la nostra regola avrebbe potuto essere scritta anche senza spazi, in questo modo:
p{color:#FF0000;}Per una questione di leggibilità del codice, tuttavia, è consigliabile utilizzare gli spazi come ho fatto io nell’esempio all’inizio di questa lezione.
Nella descrizione della sintassi, ancora, abbiamo visto che il primo elemento di ciascuna regola CSS è il selettore, è quindi il caso di precisare che è possibile utilizzare, all’interno del selettore, più di un elemento, ad esempio:
p, div, td { color: #FF0000; }Un’ultima considerazione, infine, in merito agli stili inline: a differenza della sintassi vista per i fogli di stile, infatti, gli stili in linea non richiedono l’indicazione del selettore e l’utilizzo delle parentesi graffe:
<p style="color: #FF0000;">...</p>Come è ovvio il selettore non è necessario perchè l’elemento cui applicare lo stile è già definito essendo il tag cui è applicato l’attributo style; allo stesso tempo non sono necessarie le parentesi in quanto la regola è delimitata dalle virgolette dell’attributo.
Le @-rules
Le direttive sono un particolare costrutto che può essere facilmente riconosciuto in quanto inizia sempre col simbolo della chiocciola (@).
/* importo un altro foglio di stile */
@import url("altro-stile.css");Mediante le direttive vengono compiute determinate operazioni come, ad esempio, l’import di un altro foglio di stile oppure la definizione di regole speciali per la stampa dei documenti.
Per ora abbiamo solo voluto accennare all’argomento sul quale torneremo, più approfonditamente, nel proseguo di questa guida.
