Impossibile scaricare o salvare file

Height definisce la distanza tra il bordo superiore e quello inferiore di un elemento. Non è ereditata

selettore {height: valore;}

Luso va sempre valutato con attenzione, Il comportamento dei vari browser è al riguardo notevolmente diverso

molte volte si può ottenere lo stesso risultato visivo desiderato usando proprietà come padding e margin

div {height: 250px;} p.blocco {height: 50%;}

Usando il valore auto per overflow viene aggiunta una scrollbar per scorrere il contenuto.

si applica a tutti gli elementi tranne

• colonne di tabelle

• elementi inline non rimpiazzati

• un valore numerico con unità di misura.

• un valore in percentuale. Il valore in percentuale si riferisce sempre all'altezza del blocco contenitore, purché esso abbia un'altezza esplicitamente dichiarata. Diversamente, la percentuale viene interpretata come auto.

• auto. L'altezza sarà quella determinata dal contenuto.

Overflow gestire il contenuto che superi i limiti imposti con height. Si applica a tutti gli elementi blocco e non è ereditata.

selettore {overflow : valore;}

div {overflow: auto;}

#div4 {
height: 60px;
background: Silver;
overflow: auto;
}

viene aggiunta una scrollbar per scorrere il contenuto

• visible. Valore iniziale. Il contenuto eccedente rimane visibile (con i problemi visti sopra).

• hidden. Il contenuto eccedente non viene mostrato.

• scroll. Il browser crea barre di scorrimento che consentono di fruire del contenuto eccedente.

• auto. Il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite. Di norma dovrebbe mostrare una barra di scorrimento laterale.

min-height Imposta un'altezza minima per un elemento - Non è ereditata e non è supportata da Explorer Win

selettore {min-height: valore;}

div {min-height: 200px;}

• un valore numerico con unità di misura.

• un valore in percentuale

max-height La proprietà max-height serve a impostare l'altezza massima di un elemento

selettore {max-height: valore;}

div {max-height: 400px;}

• none. Valore iniziale. L'altezza dell'elemento non è limitata.

• un valore numerico con unità di misura.

• un valore in percentuale

width

Larghezza del box=

margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro

larghezza dell'area del contenuto: width

selettore {width: valore;}

La proprietà width non è ereditata.

p {width: 90px;}

div.box {width: 50%;}

Explorer fino alla versione 5.5 interpreta male il concetto di width

• auto. Valore di default. Se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore.

• un valore numerico con unità di misura.

• un valore in percentuale. La larghezza sarà calcolata rispetto a quella dell'elemento contenitore.

min-width

Imposta la larghezza minima di un elemento. Si applica a tutti gli elementi tranne che a quelli in linea non rimpiazzati e agli elementi di tabelle. Proprietà non supportata da Internet Explorer e non ereditata

selettore { min-width: valore; }

div { min-width: 400px; }

• un valore numerico con unità di misura.

• un valore in percentuale. La larghezza sarà come minimo quella espressa dalla percentuale riferita alla larghezza dell'elemento contenitore.

max-width Imposta la larghezza massima di un elemento. Non è ereditata

selettore { max-width: valore; }

• none. Valore di default. Non c'è un limite per larghezza dell'elemento.

• un valore numerico con unità di misura.

• un valore in percentuale

margin-bottom Definisce la distanza tra il lato inferiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.

Ricordiamo che se per un elemento si imposta un margine inferiore ed esso si trova sopra ad un altro elemento che abbia impostato un margine superiore, la distanza tra i due sarà quella maggiore e non data dalla somma delle due proprietà (meccanismo del margin collapsing).

p {margin-bottom: 10px;}
div.box {margin-bottom: 20%;}

• un valore numerico con unità di misura. Il valore è espresso in termini assoluti.

• un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore.

• auto. E' quasi sempre corrispondente a 0.

margin-left Definisce la distanza tra il lato sinistro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata

h1 {margin-left: 10%;}
img {margin-left: 20px;}

• un valore numerico con unità di misura. Il valore è espresso in termini assoluti.

• un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore.

• auto. E' quasi sempre corrispondente a 0.

margin-top Definisce la distanza tra il lato superiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata

p.box {margin-top: 10%;}

img {margin-top: 20px;}

• un valore numerico con unità di misura.

• un valore in percentuale.

• auto.

margin-right Definisce la distanza tra il lato destro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata

h1 {margin-right: 10%;}
img {margin-right: 20px;}

• un valore numerico con unità di misura.

• un valore in percentuale.

• auto.

margin E' una proprietà a sintassi abbreviata. Con essa è possibile specificare i valori per tutti e quattro i lati di un elemento. Si applica a tutti gli elementi e non è ereditata

div {margin: 10px 15px 10px 20px;}

L'ordine di lettura va inteso in senso orario. Per cui: il primo valore si riferisce al lato superiore, il secondo a quello destro, il terzo al lato inferiore, il quarto a quello sinistro

valore auto per i lati sinistro e destro è quello che consente di centrare in tal modo un elemento rispetto alla pagina o al box contenitore (no su explorer5)

p {margin: 20px 10px;}
div {margin: 20px;}
h1 {margin: 10px auto;}

Valori

• un valore numerico con unità di misura.

• un valore in percentuale.

• auto. Per la proprietà margin il valore auto significa che la distanza sarà automaticamente calcolata rispetto alla larghezza dell'elemento contenitore.

• se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore

• se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro

• se si usa un solo valore, un uguale distanza sarà ai quattro lati

padding-bottom

Imposta l'ampiezza del padding sul lato inferiore di un elemento. Si applica a tutti gli elementi e non è ereditata

p.box {padding-bottom: 10px;}

• un valore numerico con unità di misura. Il valore è espresso in termini assoluti.

• un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore.

padding-left Imposta l'ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata

p {padding-left: 10%;}

• un valore numerico con unità di misura.

• un valore in percentuale.

padding-top Imposta l'ampiezza del padding sul lato superiore di un elemento. Si applica a tutti gli elementi e non è ereditata

h1 {padding-top: 10px;

• un valore numerico con unità di misura.

• un valore in percentuale.

padding-right Imposta l'ampiezza del padding sul lato destro di un elemento. Si applica a tutti gli elementi e non è ereditata

p.box {padding-right: 10px;}

• un valore numerico con unità di misura.

• un valore in percentuale.

Padding Proprietà a sintassi abbreviata. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento

p {padding: 10px 20px;}
div {padding: 10%;}

• un elenco di valori numerici con unità di misura.

• un elenco di valori in percentuale.

Definire lo stile di un singolo bordo

Sintassi (con proprietà singole)

selettore {
border-<lato>-color: <valore>;
border-<lato>-style: <valore>;
border-<lato>-width: <valore>;
}

Sintassi (abbreviata)

selettore { border-<lato>: <valore width> <valore style> <valore color>; }

sostituite a <lato> uno degli indicatori dei quattro lati: top, right, bottom o left.

div {
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
}

Molto più comodo scrivere così:

div {border-left: 1px solid black;}

1. il colore (color)

• un qualsiasi colore

• la parola chiave inherit

2. lo stile (style)

• none. L'elemento non presenta alcun bordo e lo spessore equivale a 0.

• hidden. Equivalente a none

• dotted

• dashed

• solid

• double.

• groove

• ridge

• inset

• outset

3. lo spessore (width)

• un valore numerico con unità di misura

• thin. Bordo sottile.

• medium. Bordo di medio spessore.

• thick. Bordo di largo spessore.

Definire lo stile dei quattro bordi

selettore {
border-width: <valori>;
border-style: <valori>;
border-color: <valori>;
}

Per ciascuna di queste proprietà è possibile definire da uno a quattro valori, uno per lato

top, right, bottom, left

div {
border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: black red black red;
}

Usare la proprietà border

selettore {border: <valore spessore> <valore stile> <valore colore>;}

div {border: 2px solid black;}

possiamo definire con una sola regola le impostazioni per i quattro bordi perché i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore.