[inizio] [indice generale] [precedente] [successivo] [indice analitico] [contributi]


140. 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. Nella sezione 138.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.

140.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, e si possono indicare più dichiarazioni: i selettori sono elencati separati da una virgola; le dichiarazioni sono elencate separate da 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> */

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

140.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:

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

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

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

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 Em.
nex Dimensione relativa in Ex.
n% Dimensione relativa percentuale.
small Carattere piccolo.
medium Carattere normale.
large Carattere grande.

Tabella 140.1: Proprietà riferite ai caratteri.

Nella tabella 140.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'.

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.

Tabella 140.2: Proprietà riferite ai colori e allo sfondo.

Per quanto riguarda i colori, tabella 140.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.

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 Em.
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 140.3: Proprietà riferite al testo.

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

Tabella 140.4: Proprietà riferite al testo racchiuso in blocchi rettangolari.

140.3 Riferimenti

---------------------------

Appunti Linux 2000.04.12 --- Copyright © 1997-2000 Daniele Giacomini --  daniele @ pluto.linux.it


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


[inizio] [indice generale] [precedente] [successivo] [indice analitico] [contributi]