CSS/Unità di misura, ereditarietà e box model

Copertina

Parleremo in questa pagina di alcune delle proprietà più importanti delle pagine di stile, ovvero le unità di misura, la definizione dei valori, il concetto di ereditarietà e i box.

Definire i valori

In alcuni casi, una proprietà accetta solo valori definiti tra una serie di parole chiave; negli altri casi il CSS accetta diversi di valori.

Numeri interi e reali

I numeri devono essere indicati senza separatori per le migliaia, usando un punto (.) come separatore decimale. È possibile inoltre specificare il segno del numero (+ o -) anche se la maggior parte delle volte non serve in quanto molte proprietà accettano solo valori positivi.

Grandezze

Le grandezze sono usate per definire lunghezze orizzontali e verticali. e sono espresse da un numero (intero o reale) seguito da una unità di misura.

Le principali unità di misura si dividono in:

relative: specificano una grandezza che dipende da un'altra grandezza. Sono:
- em: è relativa all'altezza font in uso. Se, ad esempio, il font è alto 12pt, 1em varrà 12pt, 2em varranno 24pt.
- ex: funziona come em, ma è relativa all'altezza della lettera x nel set di caratteri in uso.
- px: pixel, sono relativi al dispositivo di output (solitamente lo schermo) e alle impostazioni del computer dell'utente
assolute: le unità di misura assolute sono equivalenti a quelle usate nella realtà. Sono:
- in: pollici; un pollice equivale a 2,54 centimetri
- cm: centimetri
- mm: millimetri
- pt: punti — un pt per CSS vale 1/72 di pollice
- pc: pica — 1 pica vale 12 punti

Percentuale

I valori in percentuale servono per esprimere percentuali del valore che assume la proprietà stessa dell'elemento padre e vanno espresse con un numero seguito dal simbolo di percentuale (%)

URI

I valori uri specificano un percorso assoluto (es. http://esempio/dir/file) oppure uno relativo (nell'esempio di prima, dir/file).
I valori URI vanno usati tramite la notazione url(percorso). percorso deve essere delimitato da apici (') se contiene caratteri di spaziatura non codificati (es: http://esempio/dir con spazi/file).

Stringhe

Le stringhe sono delle sequenze alfanumeriche di caratteri, ovvero del testo.
In CSS vanno delimitate da una coppia di virgolette singole o doppie, finendo con lo stesso apice con cui si è iniziato. Ad esempio:

'questa è una stringa'
 "questa anche"
 'questa no (è chiusa in modo scorretto)"

Nel caso si voglia inserire in una stringa delimitata, ad esempio, da apici un apice è necessario usare il carattere di commutazione \ (barra retroversa). Ad esempio:

'questa non è una 'stringa'
 'questa invece è una \'stringa'

Colori

Un colore può essere identificato con tre metodi differenti:

tramite un numero esadecimale che indica le componenti RGB, ad esempio #RRGGBB. Per una lista completa dei colori esadecimali, vedi la tavolozza dei colori
tramite la funzione

rgb (rosso, verde, blu)

dove rosso, verde e blu sono le componenti RGB del colore espresse con un valore intero da 0 a 255.

tramite una delle parole chiave predefinite, che sono:

black - nero
silver - argento
gray - grigio
white - bianco
maroon - marrone
red - rosso
purple - viola
fuchsia - fucsia

green - verde
lime - verde chiaro
olive - oliva
yellow - giallo
navy - blu scuro
blue - blu
teal - verde acqua scuro
aqua - verde acqua

tramite un colore associato alle proprietà di sistema. Ad esempio:

background - il colore di sfondo del desktop
buttonFace - il colore di sfondo dei pulsanti
buttonText - testo dei pulsanti
captionText - testo delle etichette
grayText - testo disabilitato

Ereditarietà

Nei fogli di stile l'ereditarietà, come suggerisce la parola, si verifica quando, definito uno stile per un elemento HTML, a tutti i suoi elementi figli (cioè contenuti anche indirettamente in esso) verrà applicato lo stesso stile (si dice che la proprietà viene ereditata).

Per esempio, se all'elemento <body> applichiamo un colore rosso tramite la dichiarazione color: red, tutti i suoi elementi discendenti (quindi tutti gli elementi della pagina) erediteranno questa proprietà, a meno che non venga stabilito diversamente nelle dichiarazioni di altri elementi discendenti del tag body. Infatti l'ereditarietà è l'ultima possibilità per attribuire uno stile ad un elemento.

Non tutte le proprietà sono ereditabili: non avrebbe senso, ad esempio, forzare l'ereditarietà delle dimensioni di un elemento o i suoi margini, in quanto sono normalmente diversi per ogni singolo elemento; saranno invece ereditate proprietà che rendano la pagina omogenea, come appunto il colore o le dimensioni del testo.

Per forzare l'ereditarietà di una proprietà per una particolare dichiarazione, è possibile usare il valore speciale inherit (eredita), che è un valore valido per qualsiasi proprietà e imposta il valore dell'elemento appena genitore.

Il box model

Per box model si intende l'insieme delle regole per la definizione degli stile degli elementi blocco. Ogni box comprende alcuni elementi di base:

un'area del contenuto vero e proprio (il testo, un'immagine, ecc...), di cui è possibile definire l'altezza e la larghezza (width e height)
un padding, ossia uno spazio vuoto tra il contenuto e il bordo dell'elemento
un bordo (border), del quale è possibile impostare colore, stile e spessore
un margine (margin) che identifica uno spazio intercorrente tra l'elemento e gli altri elementi presenti nella pagina. Nel caso di due box con margini allineati in orizzontale, la loro distanza sarà data dalla somma dei due margini. Se sono allineati verticalmente, intervengono le regole del margin collapsing e la distanza effettiva tra i due elementi sarà pari al valore del margine maggiore.

L'altezza e la larghezza effettive di un elemento saranno quindi date dalla somma delle dimensioni del contenuto orizzonti/veritcali (width e height), dal valore del padding orizzontale/verticale e dallo spessore dei bordi orizzontali/verticali.