CSS: Fogli di stile

Il box model

Dettagli

Ultima modifica il Sabato, 15 Ottobre 2011 08:58

È il sistema con cui gli elementi vengono presentati nella pagina HTML. Un insieme di box rettangolari nidificati, costituiti da blocchi ed elementi inline.
Ogni box è costituito da elementi settabili tramite le proprietà dei CSS:

• margine (superiore, inferiore, destro, sinistro), distanza del box dagli elementi esterni ad esso, unico elemento che può avere valori negativi
• bordo (superiore, inferiore, destro, sinistro), linea che circoscrive l'elemento definibile nella dimensione, stile e colore
• padding (superiore, inferiore, destro, sinistro), margine tra il bordo e gli elementi interni al box, viene interessata dal colore impostato per il fondo
• area di contenuto dimensionabile nella larghezza (width) e nell'altezza (height)

Ingombro

L'ingombro totale di un box è dato in orizzontale da:
margine sinistro + bordo sinistro + padding sinistro + larghezza area di contenuto + padding destro + bordo destro + margine destro
e in verticale da:
margine superiore + bordo superiore + padding superiore + altezza area di contenuto + padding inferiore + bordo inferiore + margine inferiore
Se la larghezza non è impostata o ha valore auto (valore di default), la larghezza del box è dato dalle dimensioni dell'area del contenuto presente nel contenitore.

Auto

Il valore auto è impostabile solo per le proprietà margine, altezza e larghezza. In tal caso la dimensione sarà calcolata dal browser in fase di rendering in funzione delle dimensioni dello schermo, della finestra e degli altri contenuti ed elementi presenti.

Distanze tra elementi

Tra due box adiacenti verticalmente, la distanza non sarà data dalla somma delle due ma sarà applicata la distanza maggiore. Questo meccanismo si chiama margin collapsing e non si applica ai box adiacenti in senso orizzontale.

Altezza

In genere l'altezza di un elemento è determinata dal suo contenuto.
Le proprietà per controllare l'altezza servono a fornire un meccanismo in grado di controllare o superare in qualche modo il comportamento standard.

• height (distanza tra il bordo superiore e quello inferiore di un elemento)
  proprietà non ereditata
  si applica a tutti gli elementi tranne colonne di tabelle ed elementi inline non rimpiazzati

Valori
- valore numerico con unità di misura.
- valore in percentuale (percentuale dell'altezza del blocco contenitore, purché abbia un'altezza esplicitamente dichiarata altrimenti la percentuale viene interpretata come auto
- auto (default, l'altezza è determinata dal contenuto
L'uso di height è sempre rischioso perché il comportamento dei vari browser è diverso e comunque si possono creare effetti imprevisti quando il contenuto è maggiore rispetto all'area impostata da questa proprietà.
Per creare dei margini inferiori quindi è consigliabile usare in alternativa padding o margin.

• overflow (alternativa a height)
  proprietà non ereditata
  si applica a tutti gli elementi blocco

Valori
- visible (il contenuto eccedente rimane visibile sovrapponendosi agli altri elementi della pagina)
- hidden (il contenuto eccedente non viene mostrato)
- scroll (il browser crea barre di scorrimento)
- auto (il contenuto eccedente è gestito dalle impostazioni predefinite del browser, normalmente dovrebbe mostrare una barra di scorrimento)

• min-height (altezza minima per un elemento)
  proprietà non ereditata

Valori
- valore numerico con unità di misura.
- valore in percentuale

• max-height (altezza massima di un elemento)
  proprietà non ereditata

Valori
- none
- valore numerico con unità di misura
- valore in percentuale

Larghezza

• width (impostare le dimensioni orizzontali dell'area di contenuto)
  proprietà non ereditata

Valori
- auto
- valore numerico con unità di misura
- valore in percentuale (calcolata rispetto alla larghezza dell'elemento contenitore)

• min-width (larghezza minima di un elemento)
  proprietà non ereditata
  si applica a tutti gli elementi blocco tranne che a quelli in linea non rimpiazzati e agli elementi di tabelle

Valori
- valore numerico con unità di misura
- valore in percentuale (percentuale riferita alla larghezza dell'elemento contenitore)

• max-width (larghezza massima di un elemento)
  proprietà non ereditata

Valori
- none
- valore numerico con unità di misura
- valore in percentuale (percentuale riferita alla larghezza dell'elemento contenitore)

Margini

Il margine è la distanza tra il bordo di un elemento e gli elementi adiacenti.

• margin-bottom (distanza tra il lato inferiore di un elemento e gli elementi adiacenti)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- auto
- valore numerico con unità di misura (valore assoluto)
- valore in percentuale (percentuale rispetto alla larghezza -width- del blocco contenitore)
Se il margine inferiore è diverso dal suo adiacente inferiore, la distanza tra i due sarà quella maggiore e non data dalla somma delle due proprietà (margin collapsing)

• margin-left (distanza tra il lato sinistro di un elemento e gli elementi adiacenti)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- auto
- valore numerico con unità di misura
- valore in percentuale

• margin-top (distanza tra il lato superiore di un elemento e gli elementi adiacenti)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- auto
- valore numerico con unità di misura
- valore in percentuale

• margin-right (distanza tra il lato destro di un elemento e gli elementi adiacenti)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- auto
- valore numerico con unità di misura
- valore in percentuale

• margin (proprietà a sintassi abbreviata per specificare i valori per tutti e quattro i lati di un elemento)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- auto (la distanza sarà automaticamente calcolata rispetto alla larghezza dell'elemento contenitore)
- valori numerici con unità di misura
- valori in percentuale
Normalmente i valori usati sono 4, uno per ogni lato. L'ordine di lettura va inteso in senso orario: il primo valore si riferisce al lato superiore, a seguire il lato destro, lato inferiore e sinistro.
È possibile mischiare percentuali con valori assoluti in unità di misura.
I valori posso anche non essere tutti e quattro, seguendo queste regole:
- tre valori, il primo è il margine superiore, il secondo quelli laterali (sinistro e destro), il terzo è quello inferiore
- due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro
- un valore, viene usato per i quattro lati

Padding

Spazio tra il bordo e il contenuto di un elemento.
Il colore di fondo è ereditato dal contenuto.

• padding-bottom (lato inferiore)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- valore numerico con unità di misura (valore assoluto)
- valore in percentuale (valore calcolato come percentuale rispetto alla larghezza -width- del blocco contenitore

• padding-left (lato sinistro)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- valore numerico con unità di misura
- valore in percentuale

• padding-top (lato superiore)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- valore numerico con unità di misura
- valore in percentuale

• padding-right (lato destro)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- valore numerico con unità di misura
- valore in percentuale

• padding (proprietà a sintassi abbreviata per impostare i valori di tutti e quattro i lati di un elemento come per margin)

Valori
- valori numerici con unità di misura
- valori in percentuale

Bordi

Proprietà singole:
border-top-color, border-bottom-color, border-right-color, border-left-color
border-top-style, border-bottom-style, border-right-style, border-left-style
border-top-width, border-bottom-width, border-right-width, border-left-width
Proprietà a sintassi abbreviata:
border, border-bottom, border-top, border-right, border-left, border-color, border-style, border-width

Sintassi abbreviata:

<lato> sta per: top, right, bottom o left.
Valori
- color (colore o parola chiave inherit, se non presente sarà quello di primo piano impostato con la proprietà color)
- style (stile espresso con le parole chiave: none o hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)
- width (spessore)
valore numerico con unità di misura
thin (sottile)
medium (medio spessore)
thick (largo spessore)

Normalmente i valori usati sono 4, uno per ogni lato. L'ordine di lettura va inteso in senso orario: il primo valore si riferisce al bordo superiore, a seguire il bordo destro, bordo inferiore e sinistro.
I valori posso anche non essere tutti e quattro, seguendo queste regole:
tre valori, il primo è il bordo superiore, il secondo quelli laterali (sinistro e destro), il terzo è quello inferiore
due valori, il primo si riferisce ai bordi superiore e inferiore, il secondo al sinistro e destro
un valore, viene usato per i quattro bordi

Per definire con una sola regola le impostazioni per i quattro bordi si può usare la proprietà a sintassi abbreviata border (usata solo nel caso in cui i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore)