Le proprietà dei CSS permettono agli autori di specificare il colore del testo e lo sfondo di un elemento. Gli sfondi possono essere colori o immagini. In questo articolo analizzeremo le proprietà CSS 2.1 che regolano i colori e gli sfondi degli elementi.
La proprietà 'color'
| Valore: | <color> | inherit |
|---|---|
| Iniziale: | dipende dal programma utente |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà descrive il colore del testo di un elemento. Il valore può essere sia una parola chiave che una specifica RGB (Red Green Blue). Di seguito riportiamo l'elenco delle 17 parole chiave con il corrispettivo valore esadecimale.
| Parola chiave | Valore esadecimale |
|---|---|
| aqua | #00ffff |
| black | #000000 |
| blue | #0000ff |
| fuchsia | #ff00ff |
| gray | #808080 |
| green | #008000 |
| lime | #00ff00 |
| maroon | #800000 |
| navy | #000080 |
| olive | #808000 |
| orange | #ffa500 |
| purple | #800080 |
| red | #ff0000 |
| silver | #c0c0c0 |
| teal | #008080 |
| white | #ffffff |
| yellow | #ffff00 |
Il modello di colore RGB viene usato come colore numerico. Gli esempi che seguono specificano tutti lo stesso colore:
p {color: #f00} /* #rgb */
p {color: #ff0000} /* #rrggbb */
p {color: rgb(255, 0, 0)}
p {color: rgb(100%, 0%, 0%)}
Il formato di un valore RGB in notazione esadecimale è un '#' immediatamente seguito da tre o sei caratteri esadecimali. La notazione a tre cifre (#rgb) viene convertita nella forma a sei cifre (#rrggbb) replicando le cifre, e non aggiungendo zeri. Questa notazione viene usata quando il valore esadecimale presenta tre coppie di valori uguali, come in #ffbb00, che diventa #fb0.
Il formato di un valore RGB in notazione funzionale è 'rgb(' seguito da un elenco di tre valori numerici separati da virgole (interi o percentuali) e quindi seguito da ')'. Il valore intero 255 corrisponde a 100% e a F (o FF) in notazione esadecimale. Quindi avremo: rgb(255, 255, 255) = rgb(100%, 100%, 100%) = #FFF. Lo spazio è ammesso intorno ai valori numerici.
Proprietà dello sfondo: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' e 'background'
| Valore: | <color> | transparent | inherit |
|---|---|
| Iniziale: | transparent |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà imposta il colore di sfondo di un elemento. La parola chiave 'transparent' permette ai colori sottostanti di essere visibili. Esempio:
body {background-color: #fff; color: #000;}
| Valore: | <uri> | none | inherit |
|---|---|
| Iniziale: | none |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | l'URI assoluto o 'none' |
Questa proprietà imposta un'immagine di sfondo per un elemento. Quando si usa un'immagine di sfondo si dovrebbe anche specificare un colore di sfondo, nel caso in cui l'immagine non fosse reperibile. L'immagine viene resa sopra il colore di sfondo. I valori sono sia un URI, per specificare l'immagine, sia 'none', per non specificarne nessuna:
body {
background-color: #fff;
background-image: url("sfondo.gif");
color: #000;
}
p {background-image: none;}
| Valore: | repeat | repeat-x | repeat-y | no-repeat | inherit |
|---|---|
| Iniziale: | repeat |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Se viene specificata un'immagine di sfondo, 'background-repeat' specifica se l'immagine viene ripetuta e come.La ripetizione copre le aree di contenuto, padding e bordo di un box. Le specifiche non definiscono il posizionamento dell'immagine per gli elementi inline. I valori sono:
- repeat
- L'immagine viene ripetuta orizzontalmente e verticalmente.
- repeat-x
- L'immagine viene ripetuta solo orizzontalmente.
- repeat-y
- L'immagine viene ripetuta solo verticalmente.
- no-repeat
- L'immagine non viene ripetuta.
Esempio:
body {
background-color: #fff;
background-image: url("pattern.gif");
background-repeat: repeat-x;
color: #000;
}
| Valore: | scroll | fixed | inherit |
|---|---|
| Iniziale: | scroll |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Se viene specificata un'immagine di sfondo, questa proprietà specifica se resta fissa rispetto al viewport ('fixed') o se scrolla insieme con il blocco contenitore ('scroll'). Anche se l'immagine è fissa, è visibile solo quando si trova nelle aree di contenuto, padding o bordo dell'elemento. Esempio:
body {
background-color: #fff;
background-image: url("fiore.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
color: #000;
}
I browser che non supportano 'fixed' ignorano la parola chiave.
| Valore: | [[<percentage> | <length> | left | center | right] [<percentage> | <length> | top | center | bottom]?] | [[left | center | right] || [top | center | bottom]] | inherit |
|---|---|
| Iniziale: | 0% 0% |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | in riferimento alle dimensioni del box stesso |
| Media: | visuale |
| Valore calcolato: | per <length> il valore assoluto, altrimenti una percentuale |
Se viene specificata un'immagine di sfondo, questa proprietà indica la sua posizione iniziale. Accetta uno o due valori: il primo valore si riferisce all'asse orizzontale (x), il secondo a quello verticale (y). I valori sono:
- <percentage> <percentage>
- Con una coppia di valori '0% 0%' l'immagine viene posizionata nell'angolo in alto a sinistra del limite del padding del box. Viceversa, i valori '100% 100%' la posizionano nell'angolo in basso a destra. Tutti le altre posizioni risulteranno dall'intersezione delle coordinate x e y.
- <length> <length>
- Con una coppia di valori '1em 20px', l'immagine viene posizionata alla distanza di 1em a destra e di 20px sotto l'angolo superiore sinistro dell'area di padding.
- top left e left top
- Come '0% 0%'.
- top, top center e center top
- Come '50% 0%'.
- right top e top right
- Come '100% 0%'.
- left, left center e center left
- Come '0% 50%'.
- center e center center
- Come '50% 50%'.
- right, right center e center right
- Come '100% 50%'.
- bottom left e left bottom
- Come '0% 100%'.
- bottom, bottom center e center bottom
- Come '50% 100%'.
- bottom right e right bottom
- Come '100% 100%'.
Se viene dato un solo valore, si imposta solo la posizione orizzontale, e la posizione verticale sarà 50%. Se vengono dati due valori, la posizione orizzontale viene prima. Le combinazioni di parole chiave, lunghezze e percentuali sono ammesse.Per le combinazioni di parole chiave e altri valori, 'left' e 'right' possono essere usate solo come primo valore, e 'top' e 'bottom' come secondo. Le posizioni negative sono permesse.
Nota:
Questo vale per i CSS 2.1. I CSS 2 affermano che le parole chiave non possono essere combinate con valori di percentuale o di lunghezza.
Esempio:
body {
background-color: #fff;
background-image: url("logo.gif");
background-repeat: no-repeat;
background-position: 10% 50px;
color: #000;
}
| Valore: | [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit |
|---|---|
| Iniziale: | vedi proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | permesse per 'background-position' |
| Media: | visuale |
| Valore calcolato: | vedi proprietà individuali |
La proprietà 'background' è una proprietà abbreviata che serve ad impostare le proprietà dello sfondo in un'unica dichiarazione. Questa proprietà imposta prima le proprietà individuali sul loro valore iniziale e poi assegna valori espliciti dati nella dichiarazione. Esempio:
body {background: #fff; color: #000;}
p {background: #ffc url("img.gif") no-repeat fixed 5% 5%;}