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

Wikibooks, manuali e libri di testo liberi.
< CSS

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[modifica]

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[modifica]

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[modifica]

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:

Percentuale[modifica]

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[modifica]

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 può essere delimitato da apici (').

Stringhe[modifica]

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[modifica]

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à[modifica]

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[modifica]

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.