Gestione del colore | Guida CSS

Gestione del=20 colore

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

Definizione del colore

Parole chiave

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

3D"Figura

L'ordine =E8 quello dei colori visualizzati = nell'immagine.

#RRGGBB

Le semplici 16 parole chiave non esauriscono ovviamente = la gamma=20 dei colori visualizzabili su un monitor moderno. Gi=E0 in = HTML era=20 possibile impostare il colore di un elemento servendosi di = codici=20 esadecimali. In essi, le prime due lettere (o numeri)=20 corrispondono ai valori per il colore rosso (RED), la = seconda=20 coppia fa riferimento al verde (GREEN), l'ultima al = blue=20 (BLUE).

Esempio

#CC0000

Il codice sopra rappresenta una tonalit=E0 di rosso.

#RGB

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

#C00

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

rgb(rrr%, ggg%, bbb%)

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

rgb(0%, 0%, 0%)

Per il bianco:

rgb(100%, 100%, 100%)

rgb(rrr, ggg, bbb)

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

rgb(0, 0, 0,)

La propriet=E0 color

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

il colore di primo piano (foreground color)=20
il colore di sfondo (background color)=20
il colore del bordo (border color)

La propriet=E0 color definisce esclusivamente:

il colore di primo piano, ovvero quello del testo=20
il colore del bordo di un elemento quando non si = imposti=20 esplicitamente quest'ultimo con le propriet=E0 = border o=20 border-color (vedi l'esempio allegato).

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

Sintassi

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

selettore { color: <valore> }

Valori

I valori possibili sono:

qualunque valore di un colore definito con i metodi = visti=20 sopra=20
la parola chiave inherit. Con essa si dice=20 esplicitamente al browser di ereditare le impostazioni = definite=20 per l'elemento parente. E' stata introdotta con CSS2 e da = qui in=20 avanti sar=E0 citata nella guida senza ulteriori = spiegazioni.=20

Esempi

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

Ulteriori esempi in questa=20 pagina.

Links

Tavola dei colori esadecimali: si tratta = dei 256=20 colori della palette WebSafe

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

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

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =