una pagina HTML non è altro che un
insieme di box rettangolari e che il
flusso dell’informazione è sempre
verticale.
Gli elementi si dispongono sempre uno
sotto l’altro. Ma perche?
Come sono fatti questi elementi?
Come forzare la disposizione
orizzontale?
H1
<p>
h2
<div>
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
Ogni box è caratterizzato da
1. Larghezza dello spazio per i
contenuti (width)
2. Altezza dello spazio per i contenuti
(height)
3. Spazio fra contenuti e bordi
(padding)
4. Bordo (border)
5. Spazio fra il bordo e gli altri oggetti
della pagina (margin)
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
<div>Ex nostrum … </div>
<div>Indoctum … </div>
body {
margin: 0;
padding: 0;
}
div {
width:300px;
padding:10px;
border:5px solid #600;
margin: 20px;
}
Si noti che i margini superiori e inferiori adiacenti
collassano
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
• Internet Explorer per Windows versione
5.5 e precedenti ha un modo differente
di interpretare il box model: anziché
aggiungere il padding e il border alla
larghezza dei contenuti, toglie spazio ai
contenuti
• La larghezza totale del box (bordi e
padding compresi) è pari al valore
assegnato alla proprietà width.
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Se non si specifica la larghezza (width) dei contenuti del box, questo si
allargherà (margini compresi) per riempire tutto lo spazio a sua
disposizione
• Se non si specifica la altezza (height) dei contenuti del box, questo si
espanderà in verticale il minimo possibile per ospitare gli oggetti al suo
interno
• La larghezza e la altezza del box possono essere espresse:
• In percentuali rispetto alle dimensioni del box contenitore
• Tramite le unità di miusra px (em, ex, pt, mm)
• Tramite il valore auto
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica la larghezza di un box, questa diviene
indipendente dalla dimensione effettiva dei suoi contenuti
• Internet Explorer per Windows in realtà allarga il box quando i suoi contenuti (ad
esempio un’immagine o una stringa molto lunga) eccedono la larghezza del box
• È possibile anche indicare una larghezza minima e una
larghezza massima tramite le proprietà min-width e maxwidth, ma Internet Explorer (Win/Mac) non supporta tali
proprietà
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica l’altezza di un box questo non si espanderà per
ospitare eventuali contenuti che richiedono maggiore spazio
• Per ottenere un simile comportamento esiste infatti la proprietà minheight, ma questa non è supportata né da Internet Explorer né da Safari.
Esiste anche la proprietà max-height ma presenta le stesse
incompatibilità di min-height
• A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come
fosse min-height
• Quando espressa in ‘%’, l’altezza di un box si riferisce all’altezza
esplicitamente del box genitore, quando definita tramite la proprietà
height
PRIMA PARTE: IL BOX MODEL
I MARGINI
• I margini possono essere specificati:
• Individualmente
• A coppie (top/bottom, right/left)
• Globalmente
• Le unità di misura sono le stesse utilizzate per width e height ed hanno
il medesimo comportamento, tranne auto
• Per specificare i singoli margini è possibile utilizzare le proprietà margintop, margin-right, margin-bottom, margin-left
Esempio:
div { margin-left:10px; margin-top:20px }
PRIMA PARTE: IL BOX MODEL
I MARGINI
• I quattro margini possono essere specificati anche attraverso la sintassi abbreviata:
div { margin : 10px 5px 0 20px }
I margini risultano specificati in senso orario: top, right, bottom, left.
• Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin
top/bottom e right/left:
#id { margin : 10px 20px}
• Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente:
.classe { margin: 10px }
PRIMA PARTE: IL BOX MODEL
I MARGINI
• Quando impostati sul valore auto, i margini laterali
determinano la centratura orizzontale del box a cui i margini
sono applicati
• Purtroppo Internet Explorer non supporta questo tipo di
centratura orizzontale, per cui richiede una tecnica differente
• Quando impostati sul valore auto, i margini superiore e
inferiore assumono il valore che il browser assegna loro
normalmente
• Nelle specifiche CSS non è prevista la centratura verticale dei
blocchi
PRIMA PARTE: IL BOX MODEL
I MARGINI
Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o
padding, questi collassano in un unico margine:
<div id="box-1">…</div>
<div id="box-2">…</div>
#box-1 { margin: 10px }
#box-2 { margin: 20px }
PRIMA PARTE: IL BOX MODEL
I MARGINI
I margini non collassano quando sono separati da un bordo o dal padding:
<p>Lorem ipsum dolor …</p>
<div><p>Quisque imperdiet …</p></div>
div{border:solid;margin:0;}
p{margin:1em 0;background:#CCC;color:#000;}
div p{margin:10px;}
I margini di blocchi flottanti o dei blocchi posizionati in
modo assoluto, non collassano in nessun caso.
PRIMA PARTE: IL BOX MODEL
IL PADDING
• Il padding è una sorta di imbottitura fra i contenuti e i bordi di un box
• Per specificare il padding si utilizza la stessa sintassi usata per i margini
p {padding-left:0.5em; padding-right:0.5em}
div { padding: 10px 20px 10px 20px }
.classe { padding: 5px 0 }
#id { padding: 5% }
• A differenza di margin, padding non ammette il valore auto e non
ammette valori negativi
• Il padding di box adiacenti non collassa in nessun caso
PRIMA PARTE: IL BOX MODEL
I BORDI
•
•
•
•
I bordi sono caratterizzati da tre aspetti:
1. stile
2. spessore
3. colore
Questi aspetti possono essere definiti separatamente con:
•
border-style (border-top-style, …)
•
border-width (border-top-width, …)
•
border-color (border-top-color, …)
Sono ammesse le dichiarazioni compatte per i quattro lati
(border-style: <stile> <stile> <stile> <stile>)
Per definire contemporaneamente i tre aspetti si usa la seguente sintassi:
border-top: <spessore> <stile> <colore>
border: <spessore> <stile> <colore>
PRIMA PARTE: IL BOX MODEL
I BORDI
Gli stili a disposizione sono :
• solid (linea continua singola);
• dotted (punteggiato);
• dashed (tratteggiato);
• double (doppia linea continua – è necessario uno spessore di
almeno 3px per ottenere l’effetto desiderato);
• groove (scavato);
• ridge (effetto opposto a groove, il bordo appare sbalzato);
• inset (incastonato, l’effetto grafico equivale a un pulsante
premuto);
• outset (effetto opposto a inset, l’effetto grafico equivale a un
pulsante non ancora premuto).
• none (nessun bordo, valore predefinito);
PRIMA PARTE: IL BOX MODEL
I BORDI
• Lo stile predefinito è none, dunque se non si specifica lo stile
del bordo questo non sarà comunque mostrato
• Lo spessore del bordo può essere espresso attraverso le varie
unità di lunghezza o attraverso i tre valori thin, medium,
thick, le unità percentuali non sono ammesse
• Il colore, se non specificato, corrisponde a quello del testo
usato nel box
• IE/Win non supporta bordi punteggiati da 1px
PRIMA PARTE: IL BOX MODEL
OVERFLOW
• Come detto, è possibile specificare la larghezza e l’altezza di un box
• Quando i contenuti eccedono le dimensioni del blocco è possibile definire
il comportamento del blocco stesso attraverso la proprietà overflow.
• La proprietà overflow può assumere i seguenti valori:
• visible (valore predefinito)
• hidden
• scroll
• auto
PRIMA PARTE: IL BOX MODEL
OVERFLOW: VISIBLE
• Il valore visible indica che i contenuti vanno
mostrati normalmente.
• I contenuti dovrebbero essere mostrati senza
alterare la dimensione del contenitore
• Internet Explorer per Windows espande il
contenitore fino alla dimensione richiesta dai
contenuti
div {
width:200px;height:200px;
overflow:visible;
}
PRIMA PARTE: IL BOX MODEL
OVERFLOW: HIDDEN
• Il valore hidden indica che i contenuti
vanno tagliati e non devono apparire barre
di scorrimento
div {
width:200px;height:200px;
overflow:hidden;
}
PRIMA PARTE: IL BOX MODEL
OVERFLOW: SCROLL E AUTO
• Il valore scroll indica che i contenuti vanno tagliati, se necessario. Le barre di
scorrimento devono comunque apparire.
• Il valore auto indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento
devono apparire dove necessario.
• La dimensione del contenitore non è alterata
Css Box model element
• Margini: la regione che separa una scatola dall'altra, necessariamente
trasparente.
• margin-top, margin-bottom, margin-left, margin-right: dimensioni del
margine della scatola.
• Border: la regione ove visualizzare un bordo per la scatola.
• border-top, border-bottom, border-left, border-right, border-width, bordercolor: dimensioni ed aspetto del bordo.
• border-style: può assumere come valori none, dotted, dashed, solid,
double, groove, ridge, inset, outset.
• Padding: la regione di respiro tra il bordo della scatola ed il contenuto.
Ha il colore dello sfondo.
• padding-top, padding-bottom, padding-left, padding-right: dimensioni del
padding della scatola.
• Content: la regione dove sta il contenuto dell'elemento.
• background-color, background-image, background-repeat, backgroundattachment, background-position: colore, immagine e meccanismo di
ripetizione dell'immagine di sfondo della scatola.
A seguire: Il testo
24/35
Forme abbreviate
• In molti casi è possibile riassumere in un'unica proprietà i valori di molte
proprietà logicamente connesse.
• Si usa una sequenza separata da spazi di valori, secondo un ordine
prestabilito. Se si mette un valore solo esso viene assunto da tutte le
proprietà individuali. Ad esempio:
•
•
•
•
margin per margin-top, margin-left, margin-bottom, margin-right
border per border-top, border-left, border-bottom, border-right
padding per padding-top, padding-left, padding-bottom, padding-right
font per font-style, font-variant, font-weight, font-size, line-height, font-family
P { font: bold italic large Palatino, serif }
BODY { margin: 10 0 0 10; }
BODY {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
BODY { padding: 5px; }
BODY {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
Sappiamo che una pagina HTML non è altro che
un insieme di box rettangolari
Tali elementi possono essere suddivisi in
• elementi di tipo BOX (es: div)
• elementi di tipo INLINE (es: li per menu)
Elementi inline-level
• Elementi inline adiacenti vengono disposti orizzontalmente, mentre
gli elementi blocco vengono disposti verticalmente.
• Un elemento inline occuperà sia in orizzontale che in verticale l’altezza
necessaria al suo contenuto
• Solitamente agli elementi inline non è possibile attribuire una
dimensione con i classici width ed height
• Display:inline si utilizza di solito su tag <li> per voci di menu o
su piu immagini per creare una galleria in linea
Elementi block-level
• Un elemento block-level può contenere altri elementi block-level e anche
elementi inline, mentre un elemento inline può contenere solo altri elementi
inline.
• Ad un elemento block-level si possono attribuire delle dimensioni.
• Un elemento block level di dimensioni non specificate occupa tra margini, bordi,
padding e contenuto, tutta la larghezza messa a disposizione del suo box
contenitore. In verticale occuperà l’altezza necessaria al suo contenuto.
• Gli elementi di tipo blocco hanno la proprietà display con valore block. Sono, ad
esempio, i paragrafi e tutti i tag di heading (h1, h2, h3, …), il tag div. Questi
elementi, quando specificate, assumono le dimensioni impostate nel CSS e, non
accettano altri oggetti sulla stessa riga ma mantengono il flusso verticale.
Come forzare il flusso verticale?
• Display:inline-block
• Forza un elemento ad avere proprietà di tipo blocco ma a disporsi
orizzontalmente rispetto al flusso verticale della pagina.
• Utilizzato sugli <li> per creare delle voci di menu che abbiano un
corpo con dimensioni di altezza e larghezza modificabili
L’altro sistema per forzare il flusso verticale è
l’utilizzo della proprietà float (vedremo piu
avanti)