[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [home] [volume] [parte]


Capitolo 474.   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 471.2 è già descritto in quanti modi si può includere un foglio di stile CSS in un documento HTML, pertanto questo particolare non viene riproposto.

474.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 */

474.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 ci possono essere regole che si contraddicono a vicenda. Evidentemente, in questi casi viene applicato un criterio di scelta, che viene descritto più avanti.

474.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]#identificazione

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 }

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 va 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;
}

474.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.

474.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 474.11. 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 474.11 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 quello preferito:

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 474.13. 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 474.13), 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 474.14. 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 474.15. 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.

474.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 potrebbe ottenere in modo meno dettagliato come segue:

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

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

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

Proprietà Valori Descrizione
size
x y
Ampiezza e altezza della pagina (nelle varie unità di misura).
auto
Definisce le dimensioni e l'orientamento in modo automatico.
landscape
Orientamento orizzontale.
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.

474.4   Riferimenti


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


Appunti di informatica libera 2008 --- Copyright © 2000-2008 Daniele Giacomini -- <appunti2 (ad) gmail·com>


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

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [home]

Valid ISO-HTML!

CSS validator!

Gjlg Metamotore e Web Directory