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 em, px, (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:1em; margin-top:2em }
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 : 1em 2em }
• Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente:
.classe { margin: 1em }
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: 1em }
#box-2 { margin: 2em }
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:1em;}
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: 0.5em 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: COLORI E SFONDI
SFONDI
• Lo sfondo può essere
• Trasparente
• Caratterizzato da una tinta piatta
• Riempito del tutto o in parte da una immagine
• Lo sfondo può essere gestito attraverso le seguenti proprietà:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (riassume le diverse proprietà)
PRIMA PARTE: COLORI E SFONDI
COLORE DELLO SFONDO
• La proprietà background-color può assumere i seguenti valori:
• transparent
• <colore> (vedi diapositiva 49)
• Il valore predefinito è transparent
• A differenza di color, il valore per la proprietà background-color non
è ereditato
• Se non diversamente specificato, lo sfondo della pagina è stabilito dalle
impostazioni del sistema operativo o del browser e non è
necessariamente bianco
PRIMA PARTE: COLORI E SFONDI
COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE
• Le proprietà color e background-color
dovrebbero essere sempre specificate in
coppia per evitare conflitti con le impostazioni
predefinite
• In figura si vede il risultato ottenuto con una
impostazione di Windows a contrasto elevato
quando il testo è impostato sul blu (#009) ma
lo sfondo non è esplicitamente impostato
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-IMAGE
• Per inserire un’immagine di sfondo è sufficiente specificarne l’url
tramite la proprietà background-image:
background-image:url(/im/sfondo.png);
• L’immagine sarà posizionata in alto a destra e sarà ripetuta
verticalmente e orizzontalmente
• L’immagine scorrerà assieme al testo
• Per specificare che non dovrà essere usata nessuna immagine si
utilizza il valore none (che è il valore predefinito):
background-image:none;
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-REPEAT
• Tramite background-repeat è possibile stabilire se e come
l’immagine sarà ripetuta
• background-repeat:repeat indica che l’immagine sarà
ripetuta orizzontalmente e verticalmente (valore predefinito)
• background-repeat:repeat-x indica che l’immagine sarà
ripetuta solo orizzontalmente
• background-repeat:repeat-y indica che l’immagine sarà
ripetuta solo verticalmente
• background-repeat:no-repeat indica che comparirà una
sola occorrenza dell’immagine
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-ATTACHEMENT
• Tramite background-attachment è possibile stabilire se
l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina
• background-attachment:scroll indica che l’immagine
scorrerà assieme alla pagina (valore predefinito)
• background-attachment:fixed indica che l’immagine
sarà fissata nella sua posizione iniziale indipendentemente
dallo scorrimento della pagina (il funzionamento è garantito solo
con <body>)
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION
• Tramite background-position è possibile stabilire la posizione iniziale
dell’immagine.
• I valori ammessi sono:
• Unità di lunghezza
• Unità percentuali
• Parole chiave:
• left | center | right
per il posizionamento orizzontale
• top | center | bottom
per il posizionamento verticale
• I valori vanno espressi in coppia e indicano rispettivamente il
posizionamento orizzontale e verticale
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION
• Quando sono usate le unità di lunghezza, l’angolo superiore sinistro
dell’immagine è posizionato relativamente all’angolo superiore sinistro
dell’area del padding
• Quando sono utilizzate le unità percentuali si ha il seguente
comportamento:
• Sia X% il valore percentuale per la posizione orizzontale
• Sia Y% il valore percentuale per la posizione verticale
• Il punto dell’immagine che si trova alle coordinate X%,Y% sarà posto in
posizione X%,Y% dell’area del padding
PRIMA PARTE: COLORI E SFONDI
BACKGROUND
• La proprietà background permette di definire con
un’unica dichiarazione tutte le varie proprietà
contemporaneamente
• Se non sono specificati alcuni valori, allora vengono
implicitamente assegnati quelli predefiniti:
body {
background: #fff url(img.jpg) 100% 0
no-repeat fixed;
}
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;
}