[email protected] Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box...

Lezione 2 - Tecniche di layout [email protected]

Tecniche di accessibilità webTecniche di accessibilità web

Box modelBox model



Box modelBox model

L'insieme di regole che gestisce l'aspetto visuale degli elementi di blocco in un layout.

E’ composto da 4 elementi principali:Il contenutoIl paddingIl bordoI margini



Box model: il contenutoBox model: il contenuto

È la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà CSS width. Quelle verticali con height.




La larghezza (width) e l’altezza (height) di un elemento possono essere determinate in 2 modi:Automaticamente dai browser attraverso un calcolo su contenuti e elementi della pagina.Specificata dallo sviluppare via CSS.




La proprietà width può assumere valori:In percentuale.valori espressi in unità di misura (px, em, …).

Gli elementi inline, tranne quelli rimpiazzati (es. <img>), non hanno una larghezza esplicita.




La proprietà height può assumere valori:In percentuale.valori espressi in unità di misura (px, em, …).

Se espressa in percentuale, l’altezza dell’elemento funziona solo se anche l’altezza del contenitore dell’elemento è espressa.



Box model: il paddingBox model: il padding

Il padding è uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Si usa per la distanza del contenuto dai bordi.

Se si imposta un colore o un’immagine di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.



Box model: il paddingBox model: il padding

La proprietà padding può assumere valori:In percentuale.valori espressi in unità di misura (px, em, …).

Si specifica con:Padding-top, padding-right, padding-bottom, padding-leftshorthand



Box model: il bordoBox model: il bordo

È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.

Di default, gli elementi non hanno bordo.



Box model: il bordoBox model: il bordo

La proprietà CSS border si specifica con i valori:Border-top, border-right, border-bottom, border-leftBorder-style: solid, dashed, dottedBorder-color: di solito un valore esadecimale del coloreBorder-width: thin, medium, thick oppure un’unità di misura.shorthand



Box model: il margineBox model: il margine

E’ uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

La proprietà CSS margin si specifica con i seguenti valori:Margin-top, margin-right, margin-bottom, margin-leftUn valore in percentuale o unità di misura (px, em, ..)shorthand



Box model: il “collapsing margins”Box model: il “collapsing margins”

Margini adiacenti di due o più riquadrati si combinano per formare un singolo margine, nello specifico:Due o più margini verticali adiacenti di elementi di blocco nel flusso normale collassano. L'ampiezza del margine risultante è data dal valore più grande tra i margini dei 2 elementi adiacenti. I margini verticali fra un elemento flottato ed ogni altro elemento non collassano. I margini di elementi posizionati in modo assoluto e in modo relativo non collassano.



Box model: il “collapsing margins”Box model: il “collapsing margins”



CSS PositioningCSS Positioning

Position è la proprietà CSS per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata.

Può avere 4 valori:staticrelativoabsolute fixed



CSS Positioning: staticCSS Positioning: static

Static è il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo.

Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.



CSS Positioning: relativeCSS Positioning: relative

L'elemento è posizionato relativamente rispetto alla sua posizione iniziale nel flusso del documento.

La posizione può cambiare con i valori top, left, bottom, right, senza tuttavia variare il normale flusso del documento.



CSS Positioning: absoluteCSS Positioning: absolute

L'elemento viene rimosso dal flusso del documento ed è posizionato in base ai valori top, left, right o bottom rispetto al box contenitore che a sua volta deve essere posizionato in maniera absolute, relative o fixed.

Importante: posizionando un elemento in maniera assoluta, si varia il flusso del documento.



CSS Positioning: fixedCSS Positioning: fixed

L’elemento viene, come per absolute, sottratto al normale flusso del documento. La posizione rimane fissa, cioè l’elemento non “scrolla” rispetto al viewport, ovvero la finestra principale del browser.

Problemi con IE6 e con i browser che non hanno finestre (es. iPhone).



CSS FloatingCSS Floating

Con la proprietà float possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata.




La proprietà float può assumere 3 valori:left: l'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra. right. l'elemento viene spostato sul lato destro, il contenuto scorre a sinistra. none: valore iniziale e di default in mancanza di una dichiarazione esplicita. L'elemento mantiene la sua posizione normale.




Importante

Quando si usa il float è necessario impostare la larghezza dell’elemento con la proprietà width. Non è il caso delle <img> in quanto esse hanno una larghezza intrinseca che il browser riesce a calcolare.

Es.li {float: left; width: 30em;}img {float:left}



CSS Floating: clearCSS Floating: clear

La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco e non è ereditata. Ha 4 possibili valori:none: elementi con float possono stare a destra e sinistra dell'elemento. left: impedisce il posizionamento a sinistra. right: impedisce il posizionamento a destra. both: impedisce il posizionamento su entrambi i lati.



CSS Floating: clearCSS Floating: clear

[email protected] Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box...

Documents

Transcript of [email protected] Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box...