CSS  »  Guide  »  Guida CSS di base 

Iniziamo la rassegna delle proprietà di CSS2 analizzando una di quelle che può a buon diritto dirsi fondamentale. Esamineremo prima le diverse possibilità di definire i valori dei vari colori, per poi analizzare usi e sintassi della proprietà color.

Definizione del colore

Parole chiave

Si tratta di 16 parole che definiscono i colori della palette VGA standard di Windows:

black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | white

L'ordine è quello dei colori visualizzati nell'immagine.

#RRGGBB

Le semplici 16 parole chiave non esauriscono ovviamente la gamma dei colori visualizzabili su un monitor moderno. Già in HTML era possibile impostare il colore di un elemento servendosi di 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).

Esempio

#CC0000

Il codice sopra rappresenta una tonalità di rosso.

#RGB

Molti dei codici esadecimali sono rappresentati da valori duplicati. E' possibile usare per essi una sintassi abbreviata in cui i valori per il rosso, il verde e il blue sono definiti solo dalla prima lettera o numero. Il colore dell'esempio precedente può essere definito anche così:

#C00

Nell'uso di questa sintassi vanno valutati i risultati con colori che non presentino coppie di valori duplicati. Il risultato può essere leggermente diverso a livello di tonalità a seconda dei casi.

rgb(rrr%, ggg%, bbb%)

Un altro modo per rappresentare i colori è quello di usare per i tre elementi base del sistema RGB una lista di valori in percentuale separati da una virgola. Per indicare il nero useremo, ad esempio:

rgb(0%, 0%, 0%)

Per il bianco:

rgb(100%, 100%, 100%)

rgb(rrr, ggg, bbb)

Ultima possibilità. Si definiscono i valori di rosso, verde e blue con tre valori compresi, rispettivamente, tra 0 e 255. Sistema ben noto a chi usa programmi di grafica. Il range 0-255 è l'equivalente decimale di quello esadecimale 00-FF visto in precdenza. Anche qui, i tre valori vanno separati da una virgola. Questo è il codice del nero:

rgb(0, 0, 0,)

La proprietà color

Visti i sistemi per rappresentare i colori, dobbiamo ora chiarire un aspetto importante. Per ogni elemento si possono definire almeno tre colori:

1. il colore di primo piano (foreground color)
2. il colore di sfondo (background color)
3. il colore del bordo (border color)

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 (vedi l'esempio allegato).

Per gli altri due casi esistono proprietà ad hoc che esamineremo nelle prossime lezioni. Una buona norma dei CSS vuole comunque che per un elemento di cui si sia definito il colore di primo piano si definisca anche e sempre un colore di sfondo.

Sintassi

La proprietà color si applica a tutti gli elementi ed è ereditata. Significa che se si imposta il colore per un elemento esso sarà ereditato da tutti gli elementi discendenti per cui non si definisca esplicitamente un altro colore. La sintassi è semplice:

selettore { color: <valore> }

Valori

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. E' stata introdotta con CSS2 e da qui in avanti sarà citata nella guida senza ulteriori spiegazioni.

Esempi

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

Ulteriori esempi in questa pagina.

Links

CSS color names: ottima risorsa dal sito W3Schools. Tabella Websafe con valori esadecimali e nomi dei colori (ricordiamo però che nei CSS gli unici nomi accettati sono i 16 visti nella lezione). L'utilità più grande la notate se cliccate sul codice esadecimale del colore. Si aprirà una pagina in cui quel colore viene usato come sfondo e tutti gli altri vengono usati per il testo. Eccellente quando si deve valutare l'impatto visivo della coppia colore testo-sfondo.

"I colori e il loro uso nel web": dalla sezione PRO di HTML.it.

Altri articoli

Altre guide

Altre newsletter