15 Il box model
-
l'area del 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à width. Quelle verticali con height.
-
il padding. È uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.
-
il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
-
il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.
Larghezza del box
larghezza dell'area del contenuto: width
larghezza effettiva di un box:
margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro
Larghezza ed elemento contenitore
Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che racchiude il box
Uso del valore auto
Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width).
Solo i margini possono avere valori negativi
16 Gestione del colore
black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | white |
|
#RRGGBB #CC0000 Il codice sopra rappresenta una tonalità di rosso. |
codici esadecimali. In essi, le prime due lettere (o numeri) corrispondono ai valori per il colore rosso (RED), la seconda coppia fa riferimento al verde (GREEN), l'ultima al blue (BLUE). |
#RGB #C00 Il codice sopra rappresenta una tonalità di rosso |
codici esadecimali i valori per il rosso, il verde e il blue sono definiti solo dalla prima lettera o numero |
rgb(rrr%, ggg%, bbb%) rgb(0%, 0%, 0%) nero rgb(100%, 100%, 100%) bianco |
usare per i tre elementi base del sistema RGB una lista di valori in percentuale separati da una virgola |
rgb(rrr, ggg, bbb) rgb(0, 0, 0,) nero |
Si definiscono i valori di rosso, verde e blue con tre valori compresi compresi, rispettivamente, tra 0 e 255 |
Per ogni elemento si possono definire almeno tre colori: |
|
il colore di primo piano |
foreground color |
il colore di sfondo |
background color |
il colore del bordo |
border color |
La proprietà color selettore { color: <valore> } La proprietà color definisce esclusivamente:
La proprietà color si applica a tutti gli elementi ed è ereditata |
I valori possibili sono:
p{color: black; background-color: white; } |
17 Gestione dello sfondo
background-color Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata selettore {background-color: <valore>;} Usando transparent come valore un elemento avrà come colore quello dell'elemento parente |
Valori
|
background-image Definisce l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata selettore { background-image: url(/<valore>); } Usare none equivale a non impostare la proprietà: nessuna immagine verrà applicata come sfondo |
Valori
|
background-repeat Essa consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata selettore {background-repeat: <valore>;} div { background-image: url(/sfondo.gif); background-repeat: repeat-x; } |
Valori
|
background-attachment Con questa proprietà si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata selettore {background-attachment: <valore>;} background-repeat: repeat-x; |
Valori
|
background-position Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser. Proprietà non ereditata. selettore {background-position: <valore> o <valori>;} body { |
I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:
|
background E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo selettore {background: background-color background-image background-repeat background-attachment background-position;} I valori non vanno separati da virgole. L'ordine non è importante, ma quello dato è il più logico e andrebbe rispettato: si va in ordine di importanza |
body { |