CSS: proprietà dei colori e degli sfondi CSS 2.1

Short link

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'

'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.

Colori CSS
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'

'background-color'
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;}
'background-image'
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(&quot;sfondo.gif&quot;);
color: #000;
}

p {background-image: none;}
'background-repeat'
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(&quot;pattern.gif&quot;);
background-repeat: repeat-x;
color: #000;
}
'background-attachment'
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(&quot;fiore.jpg&quot;);
background-repeat: no-repeat;
background-attachment: fixed;
color: #000;
}

I browser che non supportano 'fixed' ignorano la parola chiave.

'background-position'
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(&quot;logo.gif&quot;);
background-repeat: no-repeat;
background-position: 10% 50px;
color: #000;
}
'background'
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(&quot;img.gif&quot;) no-repeat fixed 5% 5%;}