CSS, scegliere un colore

La selezione di un colore, la proprietà color, da assegnare a un elemento può avvenire in diversi modi. Fra questi il modo più semplice è sicuramente quello che permette di indicare un colore chiamandolo per nome. Il W3C ha definito 16 nomi per i colori di default, sono: black, navy, blue, maroon, purple, green, red, teal, fuchsia, olive, lime, gray, acqua, silver, yellow e white.

Se il colore che cerchiamo non è fra quelli elencati possiamo allora selezionarlo mediante il codice esadecimale che ne caratterizza le componenti primarie, attraverso la struttura: #RRGGBB.

E' possibile indicare anche le percentuali di ogni componente. Ciò può essere fatto attraverso questa struttura: rgb(R%,G%,B%), con R, G e B numeri interi compressi nell'intervallo che va da 0 a 100. Esiste inoltre anche una diversa struttura che permette di indicare le componenti come numeri interi che vanno da 0 a 255: rgb(0,0,0).

La proprietà color assegna il colore scelto al testo dell'oggetto. Lo stesso colore, poi, viene esteso anche al bordo della cornice (se la proprietà border-color non ne indica uno diverso!).

Le strutture per la scelta dei colori si applicano alle proprietà background-color, foreground-color e border-color. La sintassi da usare prevede la scelta di un selettore e la descrizione della proprietà color, secondo uno degli schemi visti sopra: selettore{color: valore;}.

La parola chiave inherit, se assegnata come valore di color, dice al browser che sta interpretando la pagina di estendere il colore dell'elemento padre anche all'elemento figlio. A questo indirizzo trovate un utile applicazione per la selezione di un colore attraverso il suo valore esadecimale. Alcuni esempi:

p {background-color: teal;}
h1 {background-color: #00AACC;}
h2 {background-color: rgb(0%,0%,100%);}
h3 {background-color: rgb(0,0,0);}