layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto"

Mirella Costantino
7 anni fa
Visualizzazioni

1 Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding Contenuto Ogni box è suddiviso in un area di contenuto ed in eventuali aree di padding, di bordo e di margine 2 1

2 Il box model Un esempio <style type="text/css"> p { background: yellow; padding: 3em; border: solid red 10px; margin: 50px; </style> </head> <body> <p>questo è il contenuto del paragrafo </p> </body> </html> 3 Il box model Proprietà delle aree di padding padding-top, padding-bottom, padding-left e padding-right specificano la larghezza delle corrispondenti aree di padding padding da solo permette di impostare il valore per tutte e quattro le aree in un sol colpo (es. padding: 3em) se è specificato un solo valore, questo viene applicato a tutte le aree se sono specificati due valori, si riferiscono, rispettivamente, alle aree superiore e inferiore e alle aree di sinistra e di destra se sono specificati tre valori, si riferiscono, rispettivamente, all area superiore, alle aree di sinistra e di destra e all area inferiore se sono specificati quattro valori, si riferiscono, rispettivamente, all area superiore, all area di destra, all area inferiore e all area di sinistra 4 2

3 Il box model Proprietà dei bordi border-top-width, border-right-width, borderbottom-width e border-left-width specificano lo spessore delle corrispondenti aree di bordo valori "qualitativi" thin, medium e thick o un valore esplicito; con border-width si imposta il valore sui quattro lati border-top-color, border-right-color, borderbottom-color e border-left-color specificano il colore delle corrispondenti aree di bordo con border-color si imposta il valore sui quattro lati 5 Il box model proprietà dei bordi border-top-style, border-right-style, borderbottom-style e border-left-style specificano lo "stile" delle corrispondenti aree di bordo valori none (default), hidden, dotted, dashed, solid, double, groove, ridge, inset, outset ; con border-style si imposta il valore sui quattro lati border-top, border-right, border-bottom e border-left riassumono globalmente le proprietà delle corrispondenti aree di bordo (es. border-bottom: thick solid red) border imposta le stesse proprietà per le quattro aree di bordo (es. border: solid red 3px) 6 3

4 Il box model Proprietà dei margini margin-top, margin-bottom, margin-left e marginright specificano il valore per le corrispondenti aree di margine margin da solo permette di impostare il valore per tutte e quattro le aree "in un sol colpo" (es. margin: 3em) valgono le considerazioni fatte per le aree di padding (es. se sono specificati due valori, si riferiscono, rispettivamente, alle aree superiore e inferiore e alle aree di sinistra e di destra, ecc.) 7 Il box model Tipi di box Block-level box nei media visivi (browser, stampanti,... ) vengono rappresentati come blocchi separati (es. l elemento <p>); Inline-level box non sono rappresentati come blocchi separati (es. l elemento <em>) Proprietà display permette di specificare come un elemento HTML deve essere disposto nel visual user agent Es. p { display: block em { display: inline img { display: none 8 4

5 Il box model Controllo delle dimensioni del box Proprietà width e height specificano, rispettivamente, la larghezza e l altezza della "content area" dei box generati da elementi di tipo block possono assumere un valore in pixel o un valore percentuale Esempio: p { width: 100px; height 200px Proprietà min-width, max-width, min-height, maxheight specificano le dimensioni (larghezza e altezza) minime e massime che un box può avere 9 Posizionamento dei box Posiz. a flusso normale Box di tipo block: sono disposti uno di seguito all altro, verticalmente, partendo dall alto del blocco contenitore la distanza verticale tra due box adiacenti è determinata dalla proprietà margin-top il bordo sinistro (o destro, per un allineamento a destra) del box tocca il bordo sinistro (o destro) del blocco contenitore (ma il body ha in genere un margine di default ) Box di tipo inline: sono disposti uno di seguito all altro, orizzontalmente, partendo dall alto del blocco contenitore; vengono rispettati i margini, i bordi, i padding 10 5

Posizionamento dei box Posizionamento flottante Il box, una volta disposto secondo il flusso normale, viene traslato a sinistra o a destra Si usa la proprietà float valori left, right e none (nessuna

img { float: right 11 Posizionamento dei box Posizionamento assoluto Il posizionamento avviene rispetto al contenitore del box - Proprietà position con valore absolute Esempio: #b1 { background:

6 Posizionamento dei box Posizionamento flottante Il box, una volta disposto secondo il flusso normale, viene traslato a sinistra o a destra Si usa la proprietà float valori left, right e none (nessuna traslazione) La proprietà clear permette di specificare quali lati di un box non possono essere adiacenti ad altri box valori left, right, both e none Es. img { float: right 11 Posizionamento dei box Posizionamento assoluto Il posizionamento avviene rispetto al contenitore del box - Proprietà position con valore absolute Esempio: #b1 { background: yellow; width: 250px; height: 200px; top: 25px; left: 50px; #b2 { background: white; width: 100px; height: 100px; top: 25px; left: 25px; <div id="b1">questo è il contenuto del blocco b1 <div id="b2">questo è il contenuto del blocco b2 </div> </div> 12 6

Posizionamento dei box Posizionamento relativo Il posizionamento avviene secondo lo schema a flusso normale, ma si possono specificare degli offset (traslazioni in su, in giù, a sinistra e a destra)

7 Posizionamento dei box Posizionamento relativo Il posizionamento avviene secondo lo schema a flusso normale, ma si possono specificare degli offset (traslazioni in su, in giù, a sinistra e a destra) - Proprietà position con valore relative a differenza dei blocchi posizionati in modo assoluto (che, se non si indica la larghezza, sono larghi solo "quanto serve"), i box posizionati relativamente occupano tutto lo spazio disponibile in larghezza Esempio: Ecco l'equazione: x 2 4 = 0.apice { position: relative; font-size: 0.5em; top: -0.7em; <p> Ecco l'equazione: x<span class="apice">2</span> - 4 = 0 </p> 13 Posizionamento dei box Posizionam. assoluto fisso Il posizionamento avviene rispetto alla finestra del browser - Proprietà position con valore fixed il blocco non si muove con lo scrolling (effetto simile a quello ottenibile con i frame ) non funziona con Explorer (neanche con la versione 7 ) Esempio: body { margin: 5px; #menu { position: fixed; width: 150px; background: yellow; top: 10px; #contenuto { background: white; margin-left: 160px; top: 10px; 14 7

Posizionamento dei box Sovrapposizioni La proprietà z-index permette di specificare l'ordine relativo di sovrapposizione di box che occupano le

top: 20px; left: 20px; color: white; z-index: 2 #f { top: 15px; left: 15px; z-index: 1; <p id="descrizione"> Testo sopra l'immagine</p> <img

jpg" id="f" /> 15 Gestione del contenuto dei box Overflow Se un box (di tipo block) è troppo piccolo per il suo contenuto, viene per default

8 Posizionamento dei box Sovrapposizioni La proprietà z-index permette di specificare l'ordine relativo di sovrapposizione di box che occupano le stesse aree il box con il valore più alto di z-index sarà in primo piano, quello con il valore più basso sarà sullo sfondo - Esempio: #descrizione { top: 20px; left: 20px; color: white; z-index: 2 #f { top: 15px; left: 15px; z-index: 1; <p id="descrizione"> Testo sopra l'immagine</p> <img src="rosa.jpg" id="f" /> 15 Gestione del contenuto dei box Overflow Se un box (di tipo block) è troppo piccolo per il suo contenuto, viene per default ingrandito anche se si sono specificate le dimensioni Proprietà overflow permette di definire come si deve "comportare" il contenuto di un box - Valori visible (default), hidden, scroll, e auto Esempio: #b2 { background: lightgrey; width: 100px; height: 100px; top: 25px; left: 25px; overflow: auto; 16 8

Gestione del contenuto dei box Regioni di clipping Una regione di clipping definisce un rettangolo all'interno del quale il contenuto di un box è visibile Si specifica con la proprietà clip valore

9 Gestione del contenuto dei box Regioni di clipping Una regione di clipping definisce un rettangolo all'interno del quale il contenuto di un box è visibile Si specifica con la proprietà clip valore rect(top right bottom left) Esempio: area di clipping posizionata in alto a sinistra, larga e alta 50 pixel #b2 { background: lightgrey; width: 100px; height: 100px; top: 25px; left: 25px; clip: rect( ); 17 9

Documenti analoghi

WEB I FOGLI DI STILE. Gabriele Murara

WEB I FOGLI DI STILE. Gabriele Murara WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento