Una pagina HTML non è altro che un insieme di box rettangolari e che il flusso dell’informazione è sempre verticale. Gli elementi si dispongono sempre.

Presentazione sul tema: "Una pagina HTML non è altro che un insieme di box rettangolari e che il flusso dell’informazione è sempre verticale. Gli elementi si dispongono sempre."— Transcript della presentazione:

1 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?

2 H1 h2

3 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

4 IL BOX MODEL Ex nostrum … Indoctum … 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

5 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

6 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

7 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 max- width, ma Internet Explorer (Win/Mac) non supporta tali proprietà PRIMA PARTE: IL BOX MODEL

8 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à min- height, 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

9 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à margin- top, margin-right, margin-bottom, margin-left Esempio: div { margin-left:10px; margin-top:20px } PRIMA PARTE: IL BOX MODEL

10 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

11 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

12 I MARGINI Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o padding, questi collassano in un unico margine: … … #box-1 { margin: 10px } #box-2 { margin: 20px } PRIMA PARTE: IL BOX MODEL

13 I MARGINI I margini non collassano quando sono separati da un bordo o dal padding: Lorem ipsum dolor … Quisque imperdiet … div{border:solid;margin:0;} p{margin:1em 0;background:#CCC;color:#000;} div p{margin:10px;} PRIMA PARTE: IL BOX MODEL I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

14 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

15 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: ) Per definire contemporaneamente i tre aspetti si usa la seguente sintassi: border-top: border: PRIMA PARTE: IL BOX MODEL

16 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

17 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

18 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

19 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

20 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

21 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 PRIMA PARTE: IL BOX MODEL

22 A seguire: Il testo 24/35 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, border- color: 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, background- attachment, background-position: colore, immagine e meccanismo di ripetizione dell'immagine di sfondo della scatola. Css Box model element

23 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; }

24 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)

25 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 per voci di menu o su piu immagini per creare una galleria in linea Elementi inline-level

26 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.

27

28 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 per creare delle voci di menu che abbiano un corpo con dimensioni di altezza e larghezza modificabili

29

30 L’altro sistema per forzare il flusso verticale è l’utilizzo della proprietà float (vedremo piu avanti)