HTML Lezione 7 Il modello dei contenitori. Gestire lo spazio tra gli elementi Lo spazio tra gli elementi della pagina o allinterno del contenuto di un.

Presentazione sul tema: "HTML Lezione 7 Il modello dei contenitori. Gestire lo spazio tra gli elementi Lo spazio tra gli elementi della pagina o allinterno del contenuto di un."— Transcript della presentazione:

1 HTML Lezione 7 Il modello dei contenitori

2 Gestire lo spazio tra gli elementi Lo spazio tra gli elementi della pagina o allinterno del contenuto di un elemento ha una grande importanza sia per la leggibilità delle pagine che per la loro gradevolezza visiva. Nellesempio: i due DIV che ospitano i dati dei due DVD sono attaccati Inoltre il testo è troppo vicino allimmagine e tra le varie righe di testo cè lo stesso spazio.

3 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. Nellesempio: i due DIV che ospitano i dati dei due DVD sono stati forniti di bordo, di margine interno e sono stati spaziati esternamente uno dallaltro. Inoltre le varie righe dei dati sono state distanziate diversamente Leffetto visivo è sicuramente migliore di prima.

4 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 lelemento 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 dellelemento. 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.

5 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 dellelemento (testo o altri elementi)

6 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 Nellesempio dei DVD border:2px dotted #333333; a ssegna al bordo spessore due pixel, stile a puntini e un colore grigio.

7 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é leffetto è orrendo):

8 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 nellordine orario partendo dallalto

9 Esempi padding Nellesempio, il padding di ciascuno dei tre elementi DIV è regolato con valori diversi Nellesempio, il padding dellelemento DIV e regolato con valori diversi per ciascun lato

10 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 nellordine orario partendo dallalto

11 Esempi di margin Nellesempio, il margin di ciascuno dei due elementi DIV è impostato a 0 pixel Nellesempio, il primo contenitore ha margin-bottom:10px; il secondo ha margin-left:25px;