[successivo] [precedente] [inizio] [fine] [indice generale] [violazione GPL] [translators] [docinfo] [indice analitico] [volume] [parte]

Capitolo 262.   CSS

I fogli di stile CSS (Cascading style sheet) rappresentano un metodo semplice per consentire di dichiarare e abbinare degli stili di composizione ai documenti HTML e ad altri tipi di sistemi SGML.

Attualmente il lavoro su CSS ha generato due «livelli», CSS1 e CSS2, intesi come la prima e la seconda versione del linguaggio di stile CSS. Teoricamente, il linguaggio CSS deve essere compatibile sia verso l'alto che verso il basso, nel senso che il primo livello CSS è compatibile con il secondo e il secondo è compatibile con il primo. In pratica, le estensioni fatte al linguaggio nel CSS2 sono tali per cui dovrebbero essere ignorate semplicemente dai programmi in grado di interpretare correttamente solo CSS1.

In questo capitolo si introduce il linguaggio CSS affrontando solo parte delle caratteristiche del primo livello, con qualche annotazione eventuale sul secondo. Nella sezione 260.2 è già stato mostrato in quanti modi si può includere un foglio di stile CSS in un documento HTML, pertanto questo particolare non verrà riproposto.

262.1   Logica del linguaggio CSS

Nella documentazione di CSS, le sue istruzioni vengono definite «regole», che si esprimono sinteticamente secondo la forma seguente, dove le parentesi graffe fanno parte della dichiarazione della regola:

selettore { dichiarazione }

Il principio è molto semplice: il «selettore» rappresenta qualcosa all'interno del documento; la dichiarazione è ciò che si vuole ottenere su tale oggetto. All'interno di una regola si possono raggruppare più selettori, applicando così le stesse dichiarazioni; inoltre si possono indicare più dichiarazioni: i selettori si separano con la virgola; le dichiarazioni si separano con un punto e virgola:

selettore[, selettore]... { dichiarazione[; dichiarazione]... }

Le regole possono essere scritte anche utilizzando più righe di testo normale, per cui, la stessa sintassi appena mostrata potrebbe essere scritta anche come nel modo seguente (si osservi l'aggiunta di un punto e virgola ulteriore):

selettore[, selettore]... {
    dichiarazione;
    [dichiarazione;]
    ...
}

Teoricamente, quando si scrivono le regole iniziando ogni dichiarazione in una riga separata, è possibile evitare l'aggiunta del punto e virgola finale, ma questa scorciatoia non è consigliabile in generale.

Le dichiarazioni si scompongono a loro volta in proprietà e valori loro assegnati:

selettore[, selettore]... {
    proprietà: valore [valore_alternativo]...;
    [proprietà: valore [valore_alternativo]...;]
    ...
}

Come si vede, alle proprietà si possono assegnare più valori alternativi, in ordine di importanza.

Si osservi l'esempio seguente: attribuisce il colore blu al testo degli elementi H1 di un documento HTML:

H1 { color: blue }

L'esempio successivo indica l'utilizzo di uno sfondo composto da un'immagine esterna per il corpo del documento, specificando che in mancanza dell'immagine, o in mancanza della possibilità di rappresentarla si può utilizzare uno sfondo bianco:

BODY { background: url(fondale.jpg) white }

Si intuisce che il nome del file contenente l'immagine è stato indicato come argomento di quello che sembra essere una funzione: url(). Si osservi comunque che questa funzione fa riferimento a un URI e non a un URL, come fa intendere erroneamente il suo nome.

I commenti in un foglio di stile CSS si rappresentano in modo simile al linguaggio C, nella forma:

/* testo_ignorato */

262.1.1   Ereditarietà e collegamento in cascata

Una caratteristica fondamentale del linguaggio CSS è l'ereditarietà di talune caratteristiche in certe circostanze. Per comprendere il significato della cosa basta pensare alla struttura dell'HTML, o a un altro linguaggio SGML in generale: se si attribuisce una caratteristica stilistica a un elemento che per sua natura ne può contenere altri, ci si aspetta intuitivamente che questa si trasmetta anche ai livelli inferiori se applicabile, a meno che per tali elementi sia stato definito espressamente qualcosa di diverso.

Volendo fare un esempio più pratico, si può immaginare una caratteristica riferita alla dimensione del carattere di un blocco di testo. Se questo blocco contiene delle porzioni di testo delimitate da altri elementi, che possono servire per ottenere un testo enfatizzato in qualche modo, è normale attendersi che per queste porzioni venga utilizzata la stessa dimensione del carattere, senza bisogno di dichiarare esplicitamente e dettagliatamente questa richiesta.(1)

In generale, per quanto riguarda l'HTML, è normale assegnare all'elemento BODY le caratteristiche generali di tutto il documento, sfruttando il principio di ereditarietà.

L'altra caratteristica fondamentale del linguaggio CSS è la possibilità di definire gli stili in cascata. Questo significa che si possono abbinare assieme più fogli di stile e che nel complesso che si crea, ci possono essere regole che si contraddicono a vicenda. Evidentemente, in questi casi viene applicato un criterio di scelta, che verrà descritto più avanti.

262.1.2   Selettori

Il selettore di una regola CSS è qualcosa che rappresenta una parte del testo a cui si vogliono applicare le dichiarazioni relative. Nella situazione più semplice, il selettore viene indicato con il nome dell'elemento a cui si attribuisce. In questo modo, le dichiarazioni si applicano a tutti gli elementi di quel tipo. Nell'esempio seguente, che è già stato usato in precedenza, si attribuisce il colore blu al testo che compone tutti gli elementi H1:

H1 { color: blue }

Tutti gli elementi HTML che si possono utilizzare nel corpo di tale tipo di documento possono utilizzare l'attributo CLASS. Questo permette di attribuire loro una «classe», ovvero un gruppo, di solito nell'ambito di quel tipo di elemento. Per indicare un selettore che faccia riferimento a una classe specifica di un certo elemento, si usa la notazione seguente:

[elemento].classe

Come si vede, l'indicazione dell'elemento è facoltativa, in modo tale che, se non lo si indica, si faccia riferimento a tutti gli elementi che appartengono a quella stessa classe. L'esempio seguente mostra il caso degli elementi P che appartengono alla classe nota, a cui viene abbinato il colore rosso per il testo:

P.nota { color: red }

L'esempio seguente mostra invece l'utilizzo di un selettore che fa riferimento a una classe di qualunque elemento:

.calmante { color: green }

Un selettore può essere anche più specifico e arrivare a individuare un elemento preciso nel documento HTML, attraverso il riferimento all'attributo ID:

[elemento]#identificativo

In questa situazione non è necessario indicare il nome dell'elemento, dato che la stringa di identificazione è già un dato univoco per conto proprio. Al contrario, se si sbaglia l'indicazione dell'elemento, si annulla la validità della regola relativa, perché non può essere applicata. L'esempio seguente attribuisce all'elemento P identificato dalla stringa xyz il colore blu:

P#xyz { color: blu }

La stessa cosa avrebbe potuto essere ottenuta all'interno dello stesso file HTML attraverso l'attributo STYLE con una dichiarazione simile a quella seguente:

<P ID="xyz" STYLE="color: blu">bla bla bla</P>

Un selettore può essere composto in modo da definire la dipendenza da un contesto. In altri termini, si può definire un selettore che dipende da un altro:

selettore sottoselettore [sotto_sottoselettore]...

Il primo selettore indica un ambito, all'interno del quale andrà cercata la corrispondenza per il secondo selettore, continuando eventualmente ad aumentare il dettaglio con altri selettori più specifici. Si osservi l'esempio seguente; serve a fare riferimento agli elementi EM che si trovano all'interno di un elemento H1:

H1 EM { color: green }

È importante distinguere il raggruppamento di selettori dalla definizione di un contesto più dettagliato come in questo caso. Infatti, per raggruppare i selettori si utilizza la virgola. L'esempio seguente applica il colore verde a tutti gli elementi EM contenuti all'interno di elementi H1 o H2:

H1 EM, H2 EM { color: green }

Un selettore può anche individuare una pseudo-classe, ovvero una zona di testo che viene individuata dal programma che si occupa di interpretare il documento HTML, che non corrisponde a elementi e classi indicati espressamente:

[elemento][.classe]:pseudo_classe

Il caso tipico di una pseudo-classe è quella che delimita la prima lettera di un elemento: first-letter. L'esempio seguente serve a ottenere una lettera iniziale più grande in tutti gli elementi P di classe primo:

P.primo:first-letter {
    font-size: 200%;
    float: left;
}

262.1.3   Stili in cascata

I fogli di stile CSS possono essere uniti assieme in cascata. Tra le altre cose, ciò permette la definizione di uno o più stili da parte dell'autore e di uno o più stili personalizzati da parte dell'utente che legge il documento. Un file contenente lo stile CSS può incorporare altri file attraverso la direttiva @import che ha la sintassi seguente:

@import url(uri_foglio_di_stile);

Come si vede, riappare la funzione url() già mostrata in precedenza. In generale, le direttive di incorporazione dei fogli di stile esterni vanno collocate all'inizio del file, prima delle regole CSS.

Si è accennato al fatto che, nell'ambito dello stile complessivo che si ottiene, si possono generare dei conflitti tra dichiarazioni riferite alla stessa porzione di documento. Per scegliere quale dichiarazione deve avere la meglio, è necessario stabilire un peso differente, che dipende dal contesto e può anche essere condizionato attraverso l'aggiunta della stringa ! important in coda alla dichiarazione:

H1 {
    color: black ! important;
    background: white ! important;
}

L'esempio mostra il caso in cui si tenta di aumentare il peso delle dichiarazioni che definiscono il colore del testo e dello sfondo negli elementi H1.

Viene descritta brevemente e in modo semplificato la sequenza attraverso cui vengono attribuite le caratteristiche dello stile.

262.2   Proprietà

Di seguito vengono mostrate una serie di tabelle che descrivono l'utilizzo di alcune proprietà comuni nel linguaggio CSS. Bisogna ricordare che ogni programma di lettura o di composizione dei documenti HTML può fare la propria scelta su quali siano le dichiarazioni da prendere in considerazione, ignorando tutto il resto. Pertanto, si tratta solo di un'indicazione e l'utilizzo degli stili CSS deve essere sempre valutato tenendo conto delle carenze che poi ci possono essere in fase di lettura.

Tabella 262.1. Proprietà riferite ai caratteri.

Proprietà Valori Descrizione
font-family tipo_di_carattere Tipo di carattere.
font-style normal Forma normale.
italic Corsivo.
oblique Obliquo.
font-variant normal Serie normale.
small-caps Maiuscoletto.
font-weight normal Tono normale.
bold Nero.
bolder Nerissimo.
lighter Chiaro.
font-size npt Dimensione in punti.
ncm Dimensione in centimetri.
nmm Dimensione in millimetri.
nem Dimensione relativa in quadratoni.
nex Dimensione relativa in Ex.
n% Dimensione relativa percentuale.
small Carattere piccolo.
medium Carattere normale.
large Carattere grande.

Nella tabella 262.1 si fa riferimento in particolare alla proprietà font-family. A questa può essere attribuito il nome di una famiglia di caratteri, oppure il nome di una «famiglia generica», che in pratica identifica uno stile del carattere senza indicare esattamente quale tipo di carattere. Una famiglia di caratteri potrebbe essere times, mentre una famiglia generica potrebbe essere serif, ovvero un carattere munito di grazie. Alla proprietà font-family possono essere abbinati più tipi di caratteri, separati da una virgola, per indicare una sequenza alternativa da utilizzare in mancanza di altro:

BODY { font-family: gill, helvetica, sans-serif }

L'esempio mostra proprio questo: prima si tenta di utilizzare il carattere gill; quindi si prova con helvetica; infine ci si accontenta di un carattere senza grazie, sans-serif.

Tabella 262.2. Proprietà riferite ai colori e allo sfondo.

Proprietà Valori Descrizione
color colore Colore del carattere o di primo piano.
background-color colore Colore dello sfondo.
background-image url(uri) Immagine da usare per lo sfondo.

Per quanto riguarda i colori (tabella 262.2), si possono indicare attraverso il nome che questi hanno in inglese, oppure attraverso la funzione rgb(), con la quale si specifica il valore RGB:

rgb(livello_rosso, livello_verde, livello_blu)

I numeri che esprimono i livelli dei colori fondamentali RGB vanno da 0 a 255.

Tabella 262.3. Proprietà riferite al testo.

Proprietà Valori Descrizione
vertical-align baseline Testo al livello normale.
middle Allinea al centro.
sub Pedice.
super Apice.
text-transform none Nessuna trasformazione del testo.
capitalize Rende maiuscola la prima lettera delle parole.
uppercase Tutto maiuscolo.
lowercase Tutto minuscolo.
text-align left Allinea a sinistra.
right Allinea a destra.
center Centra.
justify Allinea a sinistra e a destra.
text-indent npt Rientro in punti.
ncm Rientro in centimetri.
nmm Rientro in millimetri.
nem Rientro relativo in quadratoni.
nex Rientro relativo in Ex.
n% Rientro relativo in percentuale.
line-height normal Altezza normale della riga.
npt Altezza in punti.
ncm Altezza in centimetri.
nmm Altezza in millimetri.
n% Altezza relativa in percentuale.

Tabella 262.4. Proprietà riferite al testo racchiuso in blocchi rettangolari.

Proprietà Valori Descrizione
margin-top auto Margine superiore automatico.
npt Margine superiore in punti.
ncm Margine superiore in centimetri.
nmm Margine superiore in millimetri.
n% Margine superiore relativo in percentuale.
margin-bottom auto Margine inferiore automatico.
npt Margine inferiore in punti.
ncm Margine inferiore in centimetri.
nmm Margine inferiore in millimetri.
n% Margine inferiore relativo in percentuale.
margin-left auto Margine sinistro automatico.
npt Margine sinistro in punti.
ncm Margine sinistro in centimetri.
nmm Margine sinistro in millimetri.
n% Margine sinistro relativo in percentuale.
margin-right auto Margine destro automatico.
npt Margine destro in punti.
ncm Margine destro in centimetri.
nmm Margine destro in millimetri.
n% Margine destro relativo in percentuale.
border-width thin Bordo sottile.
medium Bordo medio.
thick Bordo spesso.
border-color colore Colore del bordo.
border-style none Bordo non visibile.
dotted Bordo puntato.
dashed Bordo tratteggiato.
solid Bordo continuo.
double Bordo continuo doppio.
width auto Larghezza automatica.
npt Larghezza in punti.
ncm Larghezza in centimetri.
nmm Larghezza in millimetri.
n% Larghezza relativa in percentuale.
height auto Altezza automatica.
npt Altezza in punti.
ncm Altezza in centimetri.
nmm Altezza in millimetri.
n% Altezza relativa in percentuale.
float none Posizione fissa.
left A sinistra con testo che scorre a destra.
right A destra con testo che scorre a sinistra.
clear none Scorre normalmente.
left Salta un oggetto che si trova a sinistra.
right Salta un oggetto che si trova a destra.
both Salta qualunque oggetto fluttuante.

262.3   Definizione della pagina

Il secondo livello del linguaggio CSS, introduce una regola speciale, @page, per la definizione della pagina, nel momento in cui il documento dovesse essere stampato. Inoltre, sono disponibili delle proprietà specifiche per l'impaginazione da usarsi nelle regole normali. In generale, la regola @page viene usata per definire i margini ed eventualmente anche le dimensioni della pagina. L'esempio seguente dichiara una pagina A4 utilizzando margini tutti uguali di 2 cm:

@page {
  size 210mm 297mm;
  margin-top: 2cm;
  margin-bottom: 2cm;
  margin-left: 2cm;
  margin-right: 2cm;
}

La stessa cosa si poteva ottenere in modo meno dettagliato come segue:

@page {
  size 210mm 297mm;
  margin: 2cm;
}

La tabella 262.5 riepiloga le proprietà più importanti riferite a questa regola.

Tabella 262.5. Proprietà riferite alla regola speciale @page.

Proprietà Valori Descrizione
size x y Ampiezza e altezza della pagina (nelle varie unità di misura).
size auto Definisce le dimensioni e l'orientamento in modo automatico.
size landscape Orientamento orizzontale.
size portrait Orientamento verticale.
margin x Dimensione di tutti i margini.
npt Dimensione in punti.
ncm Dimensione in centimetri.
nmm Dimensione in millimetri.
n% Dimensione relativa in percentuale.
margin-left x Dimensione del margine sinistro.
margin-right x Dimensione del margine destro.
margin-top x Dimensione superiore.
margin-bottom x Dimensione inferiore.

La regola @page può essere usata in modo da distinguere tra pagine destre e pagine sinistre. Si osservi a questo proposito l'esempio seguente:

@page :left {
  margin-top: 2cm;
  margin-bottom: 2cm;
  margin-left: 4cm;
  margin-right: 2cm;
}

@page :right {
  margin-top: 2cm;
  margin-bottom: 2cm;
  margin-left: 2cm;
  margin-right: 4cm;
}

Come accennato sono disponibili delle proprietà specifiche per l'impaginazione da usarsi nelle regole normali. Con queste si intende controllare la suddivisione del testo in pagine, imponendo un salto pagina, oppure impedendolo nell'ambito dell'elemento coinvolto. Queste proprietà non vengono descritte qui, ma è utile almeno tenere in considerazione la loro esistenza.

262.4   Riferimenti

Appunti di informatica libera 2003.01.01 --- Copyright © 2000-2003 Daniele Giacomini -- daniele @ swlibero.org

1) In generale, il buon senso dovrebbe essere sufficiente per intendere quando una caratteristica viene ereditata e quando questo non può succedere.

Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome css.html

[successivo] [precedente] [inizio] [fine] [indice generale] [violazione GPL] [translators] [docinfo] [indice analitico]