HTML
Lezione 7
Il modello dei contenitori
Gestire lo spazio tra gli elementi
• Lo spazio tra gli elementi
della pagina o all’interno
del contenuto di un
elemento ha una grande
importanza sia per la
leggibilità delle pagine che
per la loro gradevolezza
visiva.
• Nell’esempio: i due DIV
che ospitano i dati dei due
DVD sono attaccati
• Inoltre il testo è troppo
vicino all’immagine e tra
le varie righe di testo c’è
lo stesso spazio.
Come creare gli stili interni
• Gli stili CSS forniscono le
proprietà per impostare il
bordo degli elementi, il
loro margine interno ed il
loro margine esterno.
• Nell’esempio: i due DIV
che ospitano i dati dei due
DVD sono stati forniti di
bordo, di margine interno
e sono stati spaziati
esternamente uno
dall’altro.
• Inoltre le varie righe dei
dati sono state distanziate
diversamente
• L’effetto visivo è
sicuramente migliore di
prima.
Le proprietà dei contenitori
• BODY, P, H1, H2, …, DIV sono elementi HTML che sono contenitori (di
testo o di altri elementi)
• Questi elementi posseggono tre proprietà
– Le proprietà margin impostano il margine esterno di un elemento.
IL margine esterno è la distanza tra l’elemento e quelli esterni ad
esso. Ciascun elemento ha quattro margini (top, right, bottom e
left), uno su ciascun lato, che sono definiti con una misura.
– Le proprietà padding descrivono quanto spazio inserire tra il bordo
ed il contenuto dell’elemento. padding può essere tradotto come
margine interno. Ciascun elemento ha quattro valori di padding
(top, right, bottom e left), uno su ciascun lato, che sono definiti
con una misura.
– Le proprietà border impostano i bordi di un elemento. Ciascun
elemento ha quattro bordi, uno su ciascun lato, che sono definiti
con la loro larghezza, colore e stile.
Il modello di formattazione dei contenitori
• La figura mostra cosa si deve intendere per margine esterno
(margin), bordo (border) e margine interno (padding) di un
contenitore
• Sono anche indicate le proprietà con le quali si impostano le misure
(solo quelle del lato superiore e inferiore)
• Il contenuto di un elemento è tutto ciò che viene scritto tra i due tag
di apertura e di chiusura dell’elemento (testo o altri elementi)
Il bordo
• CSS permette di specificare larghezza colore e stile del
bordo di ciascuno dei quattro lati di un contenitore.
• Se il bordo è lo stesso per i quattro lati del contenitore, CSS
fornisce fortunatamente un modo compatto di assegnarlo
border: larghezza stile colore;
• Lo stile si sceglie tra i valori
dotted | dashed | solid | double | groove | ridge | inset | outset
• Nell’esempio dei DVD
border:2px dotted #333333;
assegna al bordo spessore due pixel, stile a puntini e un
colore grigio.
Bordi diversi per i quattro lati
• Se si desidera assegnare spessore, stile e colore diversi al
bordo dei lati, si possono usare le quattro prorpietà:
border-top: larghezza stile colore;
border-bottom: larghezza stile colore;
border-left: larghezza stile colore;
border-right: larghezza stile colore;
Esempio (sconsigliato perché l’effetto è orrendo):
Il padding
• CSS permette di specificare il padding (margine interno) di ciascun lato
di un elemento.
• Se il padding è lo stesso per i quattro lati del contenitore, CSS fornisce
fortunatamente un modo compatto di assegnarlo
padding: misura;
• Se si desidera assegnare padding diverso per ciascuno dei quattro lati,
si possono usare le quattro proprietà:
padding-top: misura;
padding-bottom: misura;
padding-left: misura;
padding-right: misura;
Oppure il modo compatto
padding: misura-sopra misura-destra misura-sotto misura-sinistra;
Le misure dei lati sono indicati nell’ordine
orario partendo dall’alto
Esempi padding
• Nell’esempio, il padding di ciascuno dei tre elementi DIV è regolato con
valori diversi
• Nell’esempio, il padding dell’elemento DIV e regolato con valori diversi
per ciascun lato
Il margin
• CSS permette di specificare il margin (margine esterno) di ciascun lato
di un elemento.
• Se il margin è lo stesso per i quattro lati del contenitore, CSS fornisce
fortunatamente un modo compatto di assegnarlo
margin: misura;
• Se si desidera assegnare padding diverso per ciascuno dei quattro lati,
si possono usare le quattro proprietà:
margin -top: misura;
margin -bottom: misura;
margin -left: misura;
margin -right: misura;
Oppure il modo compatto
margin : misura-sopra misura-destra misura-sotto misura-sinistra;
Le misure dei lati sono indicati nell’ordine orario partendo dall’alto
Esempi di margin
• Nell’esempio, il margin di ciascuno dei due elementi DIV è impostato a
0 pixel
• Nell’esempio, il primo contenitore ha
margin-bottom:10px;
il secondo ha
margin-left:25px;