1 Gestione degli elementi di blocco con i CSS Ogni elemento di blocco HTML genera uno o pi riquadri rettangolari denominati riquadri elemento. Ogni riquadro elemento ha al centro unarea di contenuto. Larea di contenuto circondata da quantit facoltative di padding, bordi e margini. Ogni margine, bordo o padding si pu impostare utilizzando diverse propriet. Tutti questi elementi (si veda la figura 1) si considerano facoltativi perch si possono impostare con una larghezza zero, eliminandoli dal riquadro elemento.
LEGENDA
Area di contenuto
Padding
Margini
Fig. 1 Riquadri di un elemento html
Il padding lo spazio, eventualmente nullo, tra il contenuto e i bordi. Il margine, invece, definisce lo spazio, eventualmente nullo, esterno ai bordi. Inoltre, con i CSS si possono specificare altezza e larghezza di ogni elemento di blocco 1 .
Larghezza di un elemento di blocco
Nel definire la larghezza dellelemento di blocco bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva del blocco. La prima data dal valore della propriet width. La seconda data da questa somma:
margine sin + bordo sin + padding sin + larghezza contenuto + padding des + bordo des + margine des
Altezza di un elemento di blocco Laltezza predefinita di un elemento determinata dal suo contenuto. Laltezza inoltre influenzata dalla larghezza del contenuto: pi un paragrafo si restringe pi deve diventare alto per ospitare tutto il contenuto presente al suo interno. Nel definire laltezza dellelemento di blocco bisogna distinguere tra laltezza dell'area del contenuto e laltezza effettiva del blocco . La prima data dal valore della propriet height. La seconda data da questa somma:
1 Le propriet di larghezza e altezza non hanno effetto sugli elementi HTML inline.
margine sup + bordo sup + padding sup + altezza contenuto + padding inf + bordo inf + margine inf
Nelle seguenti tabelle sono riepilogate le propriet per la gestione degli elementi di blocco.
Dimensioni
Propriet
Descrizione width Imposta la larghezza di un elemento. max-width Imposta la larghezza massima di un elemento. min-width Imposta la larghezza minima di un elemento. height Imposta laltezza di un elemento. max-height Imposta laltezza massima di un elemento. min-height Imposta laltezza minima di un elemento.
width Imposta la larghezza dellarea di contenuto di un elemento di blocco.
selettore {width: larghezza;}
dove larghezza pu assumere i seguenti valori: auto (il default); una lunghezza con relativa unit di misura; la percentuale rispetto al blocco contenitore inherit.
Il valore inherit specifica che la larghezza (o in generale la propriet) viene ereditata dallelemento genitore.
max-width Imposta la larghezza massima dellarea di contenuto di un elemento di blocco, impedendo che il blocco si estenda oltre la dimensione fissata. Tale valore, se specificato, sovrascrive la larghezza impostata con width.
selettore {max-width: larghezza_max;}
dove larghezza_max pu assumere i seguenti valori: none (il default), cio nessuna larghezza massima; una lunghezza con relativa unit di misura; la percentuale rispetto al blocco contenitore inherit.
min-width Imposta la larghezza minima dellarea di contenuto di un elemento di blocco, impedendo che il blocco si riduca pi della dimensione fissata. Tale valore, se specificato, sovrascrive la larghezza impostata con width e con max-width.
selettore {min-width: larghezza_min;}
dove larghezza_min pu assumere i seguenti valori: 0 (il default); una lunghezza con relativa unit di misura; la percentuale rispetto al blocco contenitore inherit.
height Imposta laltezza dellarea di contenuto di un elemento di blocco.
selettore {height: altezza;}
dove altezza pu assumere i seguenti valori: auto (il default); unaltezza con relativa unit di misura; la percentuale rispetto al blocco contenitore inherit.
max-height Imposta laltezza massima dellarea di contenuto di un elemento di blocco, impedendo che il blocco si estenda oltre la dimensione fissata. Tale valore, se specificato, sovrascrive laltezza impostata con height.
selettore {max-height: altezza_max;}
dove altezza_max pu assumere i seguenti valori: none (il default), cio nessuna altezza massima; una lunghezza con relativa unit di misura; la percentuale rispetto al blocco contenitore inherit.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 4 min-height Imposta laltezza minima dellarea di contenuto di un elemento di blocco, impedendo che il blocco si riduca pi della dimensione fissata. Tale valore, se specificato, sovrascrive la larghezza impostata con height e con max-height.
selettore {max-height: altezza_min;}
dove altezza_min pu assumere i seguenti valori: 0 (il default); una lunghezza con relativa unit di misura; la percentuale rispetto al blocco contenitore inherit.
Bordi
Le propriet dei bordi consentono di definire, per tutti e 4 i bordi: - il colore (border-color), - lo stile (border-style), - lo spessore (border-width).
Esistono, inoltre, regole CSS che consentono di agire anche solo: - sul bordo superiore (border-top-color, border-top-style, border-top-width), - sul bordo destro (border-right-color, border-right-style, border-right-widt), - sul bordo inferiore (border-bottom-color, border-bottom-style, border-bottom-width), - sul bordo sinistro (border-left-color, border-left-style, border-left-width).
Infine, si possono utilizzare le propriet abbreviate, mediante le quali possibile impostare le caratteristiche dei bordi con ununica regola CSS: - border, - border-top - border-right, - border-bottom, - border-left.
Le propriet elencate hanno effetto su tutti gli elementi, anche quelli inline.
Propriet
Descrizione border-color Imposta il colore dei 4 bordi di un elemento. border-top-color Imposta il colore del bordo superiore. border-right-color Imposta il colore del bordo destro. border-bottom-color Imposta il colore del bordo inferiore.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 5 border-left-color Imposta il colore del bordo sinistro. border-style Imposta lo stile dei bordi. border-top-style Imposta lo stile del bordo superiore. border-right-style Imposta lo stile del bordo destro. border-bottom-style Imposta lo stile del bordo inferiore. border-left-style Imposta lo stile del bordo sinistro. border-width Imposta laltezza minima di un elemento. border-top-width Imposta lo spessore del bordo superiore. border-right-width Imposta lo spessore del bordo destro. border-bottom-width Imposta lo spessore del bordo inferiore. border-left-width Imposta lo spessore del bordo sinistro. border Imposta le stesse propriet di spessore, stile e colore per tutti i bordi. border-top Imposta le propriet di spessore, stile e colore per il bordo superiore. border-right Imposta le propriet di spessore, stile e colore per il bordo destro. border-bottom Imposta le propriet di spessore, stile e colore per il bordo inferiore. border-left Imposta le propriet di spessore, stile e colore per il bordo sinistro.
border-top-color, border-right-color, border-bottom-color, border-left- color Imposta rispettivamente il colore del bordo superiore, destro, inferiore, sinistro.
selettore {border-top-color: colore;}
selettore {border-right-color: colore;}
selettore {border-bottom-color: colore;}
selettore {border-left-color: colore;}
dove colore pu assumere i seguenti valori: black (il default); un qualsiasi colore valido; transparent; inherit.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 6 border- color Imposta il colore dei quattro bordi. Pu assumere una delle seguenti forme:
dove ciascun colore pu assumere uno dei valori visti al punto precedente.
- La prima forma consente di indicare colori distinti per i 4 bordi, partendo da quello superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco. - La seconda forma pu essere utilizzata quando il colore dei bordi destro e sinistro lo stesso. - La terza forma viene utilizzata per esprimere solo due differenti colori, da attribuire alle coppie di bordi superiore-inferiore e destro-sinistro. - Lultima forma applica lo stesso colore a tutti i bordi.
border-top-style, border-right- style, border-bottom- style, border-left- style Imposta rispettivamente lo stile del bordo superiore, destro, inferiore, sinistro.
selettore {border-top-style: stile;}
selettore {border-right-style: stile;}
selettore {border-bottom-style: stile;}
selettore {border-left-style: stile;}
dove stile pu assumere i seguenti valori: none (il default), cio nessuno stile; hidden, come none ad eccezione delle tabelle; dotted, a linea punteggiata; dashed,a linea tratteggiata; solid, a linea piena; double, a linea doppia; groove, con effetto tridimensionale; ridge, con effetto tridimensionale; inset, con effetto tridimensionale; outset, con effetto tridimensionale;
dove ciascuno stile pu assumere uno dei valori visti al punto precedente.
- La prima forma consente di indicare stili distinti per i 4 bordi, partendo da quello superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco. - La seconda forma pu essere utilizzata quando lo stile dei bordi destro e sinistro lo stesso. - La terza forma viene utilizzata per esprimere solo due differenti stili, da attribuire alle coppie di bordi superiore-inferiore e destro-sinistro. - Lultima forma applica lo stesso stile a tutti i bordi.
border-top-width, border-right- width, border-bottom- width, border- left- width Imposta rispettivamente lo spessore del bordo superiore, destro, inferiore, sinistro.
selettore {border-top-width: spessore;}
selettore {border-right-width: spessore;}
selettore {border-bottom-width: spessore;}
selettore {border-left-width: spessore;}
dove spessore pu assumere i seguenti valori: medium (il default), medio spessore; thin, sottile; thick, spesso; una lunghezza con relativa unit di misura; inherit.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 8 border- width Imposta lo spessore dei quattro bordi. Pu assumere una delle seguenti forme:
dove ciascuno spessore pu assumere uno dei valori visti ai punti precedenti.
- La prima forma consente di indicare spessori distinti per i 4 bordi, partendo da quello superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco. - La seconda forma pu essere utilizzata quando lo spessore dei bordi destro e sinistro lo stesso. - La terza forma viene utilizzata per esprimere solo due differenti spessori, da attribuire alle coppie di bordi superiore-inferiore e destro-sinistro. - Lultima forma applica lo stesso spessore a tutti i bordi.
border- top Propriet abbreviata che imposta lo spessore, lo stile e il colore del bordo superiore.
Lo spessore (width), lo stile (style) e il colore (color) possono assumere uno dei valori visti in precedenza.
I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene utilizzato il valore di default.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 9 border- bottom Propriet abbreviata che imposta lo spessore, lo stile e il colore del bordo inferiore.
dove lo spessore (width), lo stile (style) e il colore (color) possono assumere uno dei valori visti in precedenza.
I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene utilizzato il valore di default.
border Propriet abbreviata che imposta lo spessore, lo stile e il colore dei bordi agli stessi valori.
selettore {border: spessore, stile, colore;}
dove lo spessore, lo stile e il colore possono assumere uno dei valori visti in precedenza.
I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene utilizzato il valore di default.
Padding
Le propriet di padding possono essere impostate in modo differente per ogni lato dellelemento: - superiore (padding-top), - destro (padding-right), - inferiore (padding-bottom), - sinistro (padding-left).
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 10 Inoltre, si pu utilizzare la propriet abbreviata padding per impostare il padding con ununica regola CSS.
Le propriet elencate hanno effetto su tutti gli elementi, anche quelli inline.
Propriet
Descrizione padding-top Imposta il padding del lato superiore. padding-right Imposta il padding del bordo destro. padding-bottom Imposta il padding del bordo inferiore. padding-left Imposta il colore del bordo sinistro. padding Imposta il padding dei 4 lati di un elemento.
padding-top Imposta il padding del lato superiore dellelemento.
selettore {padding-top: padding;}
dove padding pu assumere i seguenti valori: 0 (il default); una lunghezza con relativa unit di misura; un valore percentuale calcolato rispetto allelemento contenitore; inherit.
Non sono ammessi valori negativi.
padding-right Imposta il padding del lato destro dellelemento.
selettore {padding-right: padding;}
dove padding pu assumere gli stessi valori indicati per padding-top.
padding-bottom Imposta il padding del lato inferiore dellelemento.
selettore {padding-bottom: padding;}
dove padding pu assumere gli stessi valori indicati per padding-top.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 11 padding-left Imposta il padding del lato sinistro dellelemento.
selettore {padding-left: padding;}
dove padding pu assumere gli stessi valori indicati per padding-top.
padding Imposta il padding dei quattro lati mediante ununica regola. Pu assumere una delle seguenti forme:
dove ciascun padding pu assumere uno dei valori visti in precedenza.
- La prima forma consente di indicare padding distinti per i 4 lati, partendo da quello superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco. - La seconda forma pu essere utilizzata quando il padding dei lati destro e sinistro lo stesso. - La terza forma viene utilizzata per esprimere solo due differenti padding, da attribuire alle coppie di lati superiore-inferiore e destro-sinistro. - Lultima forma applica lo stesso padding a tutti i lati.
Margini
I margini di un elemento non hanno alcun colore di sfondo e sono completamente trasparenti. Le propriet dei margini possono essere impostate in modo differente per ogni lato dellelemento: - superiore (margin-top), - destro (margin-right), - inferiore (margin-bottom), - sinistro (margin-left).
Inoltre, si pu utilizzare la propriet abbreviata margin per impostare il margine con ununica regola CSS.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 12 Le propriet elencate hanno effetto su tutti gli elementi, anche quelli inline.
Propriet
Descrizione margin-top Imposta il margine del lato superiore. margin-right Imposta il margine del bordo destro. margin-bottom Imposta il margine del bordo inferiore. margin-left Imposta il margine del bordo sinistro. margin Imposta il margine dei 4 lati di un elemento.
margin-top Imposta il margine del lato superiore dellelemento.
selettore {margin-top: margine;}
dove margine pu assumere i seguenti valori: 0 (il default); auto, il margine viene determinato automaticamente dal browser; una lunghezza con relativa unit di misura; un valore percentuale calcolato rispetto alla larghezza (width) dellelemento contenitore; inherit.
Sono ammessi valori negativi.
margin-right Imposta il margine del lato destro dellelemento.
selettore {margin-right: margine;}
dove margine pu assumere gli stessi valori indicati per margin-top.
margin-bottom Imposta il margine del lato inferiore dellelemento.
selettore {margin-bottom: margine;}
dove margine pu assumere gli stessi valori indicati per margin-top.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/12/2013 13 margin-left Imposta il margine del lato sinistro dellelemento.
selettore {margin-left: margine;}
dove margine pu assumere gli stessi valori indicati per margin-top.
margin Imposta il margine dei quattro lati mediante ununica regola. Pu assumere una delle seguenti forme:
dove ciascun margine pu assumere uno dei valori visti in precedenza.
- La prima forma consente di indicare margini distinti per i 4 lati, partendo da quello superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco. - La seconda forma pu essere utilizzata quando il margine dei lati destro e sinistro lo stesso. - La terza forma viene utilizzata per esprimere solo due differenti margini, da attribuire alle coppie di lati superiore-inferiore e destro-sinistro. - Lultima forma applica lo stesso margine a tutti i lati.
Riferimenti E. A. Meyer, Cascading Style Sheets - La guida completa, Hops Libri, 2007