Impossibile scaricare o salvare file

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:

• il colore di primo piano, ovvero quello del testo

• il colore del bordo di un elemento quando non si imposti esplicitamente quest'ultimo con le proprietà border o border-color

La proprietà color si applica a tutti gli elementi ed è ereditata

I valori possibili sono:

• qualunque valore di un colore definito con i metodi visti sopra

• la parola chiave inherit. Con essa si dice esplicitamente al browser di ereditare le impostazioni definite per l'elemento parente.

p{color: black; background-color: white; }

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

• un qualunque colore

• la parola chiave transparent

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

• un URL assoluto o relativo che punti ad un'immagine

• la parola chiave none. Valore di default.

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

• repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard.

• repeat-x. L'immagine viene ripetuta solo in orizzontale.

• repeat-y. L'immagine viene ripetuta solo in verticale.

• no-repeat. L'immagine non viene ripetuta.

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;
background-attachment: fixed; }

Valori

• scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina)

• fixed. L'immagine rimane fissa mentre il documento scorre

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 {
background-image: url(/back_400.gif);
background-repeat: no-repeat;
background-position: center center;
}

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:

• con valori in percentuale

• con valori espressi con unità di misura

• con le parole chiave top, left, bottom, right

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 {
background: white url(sfondo.gif) repeat-x fixed;
}