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.

Presentazione sul tema: "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."— Transcript della presentazione:

1

2 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

3 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

4 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

5 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

6 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 unimmagine 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

7 LARGHEZZA E ALTEZZA Quando si specifica laltezza 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 %, laltezza di un box si riferisce allaltezza esplicitamente del box genitore, quando definita tramite la proprietà height PRIMA PARTE: IL BOX MODEL

8 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:1em; margin-top:2em } PRIMA PARTE: IL BOX MODEL

9 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

10 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

11 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: 1em } #box-2 { margin: 2em } PRIMA PARTE: IL BOX MODEL

12 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:1em;} PRIMA PARTE: IL BOX MODEL I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

13 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

14 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

15 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 leffetto desiderato); groove (scavato); ridge (effetto opposto a groove, il bordo appare sbalzato); inset (incastonato, leffetto grafico equivale a un pulsante premuto); outset (effetto opposto a inset, leffetto grafico equivale a un pulsante non ancora premuto). none (nessun bordo, valore predefinito); PRIMA PARTE: IL BOX MODEL

16 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

17 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

18 COLORE DELLO SFONDO La proprietà background-color può assumere i seguenti valori: transparent (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

19 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

20 BACKGROUND-IMAGE Per inserire unimmagine di sfondo è sufficiente specificarne l url tramite la proprietà background-image : background-image:url(/im/sfondo.png); Limmagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente Limmagine 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

21 BACKGROUND-REPEAT Tramite background-repeat è possibile stabilire se e come limmagine sarà ripetuta background-repeat:repeat indica che limmagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito) background-repeat:repeat-x indica che limmagine sarà ripetuta solo orizzontalmente background-repeat:repeat-y indica che limmagine sarà ripetuta solo verticalmente background-repeat:no-repeat indica che comparirà una sola occorrenza dellimmagine PRIMA PARTE: COLORI E SFONDI

22 BACKGROUND-ATTACHEMENT Tramite background-attachment è possibile stabilire se limmagine di sfondo sarà fissa ovvero scorrerà con la pagina background-attachment:scroll indica che limmagine scorrerà assieme alla pagina (valore predefinito) background-attachment:fixed indica che limmagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con ) PRIMA PARTE: COLORI E SFONDI

23 BACKGROUND-POSITION Tramite background-position è possibile stabilire la posizione iniziale dellimmagine. 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

24 BACKGROUND-POSITION Quando sono usate le unità di lunghezza, langolo superiore sinistro dellimmagine è posizionato relativamente allangolo superiore sinistro dellarea 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 dellimmagine che si trova alle coordinate X%, Y% sarà posto in posizione X%, Y% dellarea del padding PRIMA PARTE: COLORI E SFONDI

25 BACKGROUND La proprietà background permette di definire con ununica 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: COLORI E SFONDI

26 OVERFLOW Come detto, è possibile specificare la larghezza e laltezza 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

27 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

28 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

29 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

30 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

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