I fogli di stile
I fogli di stile rispondono all’esigenza del web designer di controllare maggiormente l’aspetto finale delle pagine web e soprattutto di separare il contenuto dalla forma, per poter più facilmente riadattare un contenuto a media diversi.
Nell’intento di chi ha sviluppato questo standard, i CSS dovrebbero permettere di separare la descrizione della formattazione di una pagina dalla descrizione della struttura e del contenuto del documento (quest’ultima è affidata ai tag XHTML).
In questo modo, la struttura del documento rimane più pulita ed è più facile modificare l’aspetto della pagina semplicemente modificando lo stile che le è stato applicato, soprattutto se le indicazioni dello stile CSS sono salvate in un file a parte poi richiamato nel file XHTML.
Inoltre, applicando lo stesso file con le indicazioni di stile a tutte le pagine di un sito, otterrete facilmente un’uniformità di stile in tutto il sito il che non guasta mai.
Con i fogli di stile si può realizzare tutta la formattazione già possibile con XHTML e molto altro ancora. Esistono diversi tipi di fogli di stile, in particolare i CSS (Cascading Style Sheets, Fogli di stile in sequenza) e JSSS (Java Script Style Sheets). Questi ultimi sono stati sviluppati da Netscape ma non fanno parte degli standard W3C, che invece ha definito uno standard per i primi. Lo standard è arrivato alla versione 2: CSS2.
La sintassi CSS
Le indicazioni dei fogli di stile seguono una sintassi diversa rispetto a XHTML ed è opportuno anticiparla qui, in modo che gli esempi seguenti siano più chiari. Ogni indicazione di stile si chiama regola e segue questa struttura:
Selettore {proprietà:valore; proprietà:valore}
Il selettore è l’elemento da modificare, che può essere un tag XHTML o una classe (ne parleremo fra un po’).
La proprietà è l’aspetto del selettore che si vuole modificare (per esempio il colore) e valore è il valore che questa proprietà deve assumere.
È possibile modificare più di una proprietà in un’unica regola, separando le varie proprietà con un punto e virgola (;).
Fra la proprietà e il suo valore occorre un simbolo di due punti (:). Le coppie proprietà-valore vanno poste fra parentesi graffe.
Per ottenere la parentesi graffa sinistra ({) occorre premere contemporaneamente sulla tastiera Alt Gr+Maiusc+è, mentre per ottenere la parentesi destra (}) usate la combinazione Alt Gr+Maiusc++.
Ecco un primo, semplice esempio:
h1 {font-color:green; font-size:9pt}
Questa riga definisce l’aspetto dei tag <h1> stabilendo che essi saranno di colore verde e la dimensione del carattere sarà di nove punti (più avanti parleremo delle unità di misura utilizzabili con CSS, per ora non preoccupatevene).
Quindi, abbiamo usato due coppie proprietà-valore. Da questo primo esempio, notate anche che, quando il nome della proprietà è composto da due parole (font-size, font-color) queste devono essere separate da un trattino (-).
Un’altra cosa importante da notare è che alcuni stili vengono ereditati da un elemento contenuto. Ovvero, ci sono alcune proprietà che tramandano il loro valore ai “figli” dell’elemento a cui sono applicate. Cerchiamo di spiegare meglio con un esempio. Se uso questa regola:
body {font-family: Verdana;}
per indicare che una pagina deve essere scritta usando il font Verdana, significa che tutti gli elementi in <body> saranno scritti con questo font a meno che non sia specificato diversamente per il singolo elemento.
Quindi, se alla regola precedente aggiungo questa:
h1 {font-family: Arial;}
significa che tutto il contenuto di <body> sarà scritto in Verdana, tranne i titoli <h1> che useranno l’Arial. In pratica, possiamo dire che l’indicazione più specifica prevale su quella eventualmente ereditata.
Abbiamo detto che solo alcune proprietà vengono ereditate. Altre, come border, non sono ereditarie. Per scoprire quali sono le proprietà ereditarie vi rimandiamo alla pagina "Property index", visibile in figura 1. Qui trovate l’elenco di tutte le proprietà CSS2, i tag a cui si applicano, i valori possibili e appunto l’indicazione se sono ereditarie (inherited in inglese).
Figura 1: l’elenco delle proprietà CSS2
È possibile forzare l’ereditarietà di una proprietà anche se non è ereditaria, assegnandole, per l’elemento che la dovrebbe ereditare, il valore inherit.
CSS permette anche una sorta di sintassi “abbreviata”: è possibile, infatti, raggruppare gli attributi usando stringhe di valori per attributi di una stessa categoria.
Per esempio, la regola:
p {font-family: arial; font-size: 12pt; margin-right:0.80in; margin-left: 0.80in}
che imposta per i paragrafi il carattere Arial 12 punti e una distanza dal margine destro e sinistro di 0,80 inch, può essere abbreviata come segue:
p {font-family: arial; size: 12pt; margin: 0.80in; 0.80in}
In pratica, abbiamo raggruppato le indicazioni sul carattere (family e size) e quelle relative ai margini (per quanto riguarda i margini, se non si danno indicazioni particolari, i valori sono relativi, nell’ordine, ai margini superiore, destro, inferiore e sinistro).
Oltre che per gli attributi, è possibile adottare una sorta di sintassi abbreviata anche per i selettori. Immaginate che i titoli <h1>, <h2> e <h3> debbano essere tutti rossi e in grassetto. Ognuno avrà poi una dimensione diversa. È possibile creare una regola che raggruppa le formattazioni comuni, poi delle regole per le formattazioni specifiche, in questo modo:
h1, h2, h3 {font-weight: bold; color: #FF0000; }
h1 {font-size: 24pt;}
h2 {font-size: 20pt;}
h3 {font-size: 16pt;}
|
