CSS Fogli di stile per il sito scolastico Bobby WorldWide Approved AAA

GESTIONE DEL COLORE

1) Definizione del colore

Parole chiave

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

Figura 1 - La palette VGA 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.

2) 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:

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:

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

Anche per il colore un documento di esempio.