- Learn
- Guida CSS di base
- Gestire il colore con i CSS
Gestire il colore con i CSS
Questa lezione è dedicata alla gestione del colore nei CSS. Esamineremo prima le diverse possibilità per definire i valori dei colori, per poi analizzare usi e sintassi della proprietà color
.
Definizione dei colori
I colori possono essere espressi in vari modi nel contesto di una regola CSS.
Parole chiave
Si tratta di sedici keyword che definiscono i colori della palette VGA standard di Windows:

Ecco la lista completa:
black | navy | blue | maroon | purple | green | red | teal | fuchsia |
olive | gray | lime | aqua | silver | yellow | white
L’ordine è quello dei colori visualizzati nell’immagine.
Notazione esadecimale: #RRGGBB
Le sedici parole chiave non esauriscono ovviamente la gamma dei colori visualizzabili su un monitor moderno. È dunque possibile impostare il colore di un elemento servendosi di codici con notazione esadecimale. 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). Il codice va preceduto dal simbolo del cancelletto (#).
Un esempio:
color: #CC0000
Il codice qui sopra rappresenta una tonalità di rosso.
Notazione RGB
Molti dei codici esadecimali sono rappresentati da valori duplicati. È 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ì:
color: #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.
Notazione decimale con RGB
Un altro modo per rappresentare i colori è quello di usare per i tre elementi base del sistema RGB una lista di valori separati da una virgola. I valori possono essere espressi in percentuale (da 0% a 100%) o con una scala che va da 0 (il nero) a 255 (il bianco).
Per indicare il nero useremo, ad esempio:
color: rgb(0%, 0%, 0%);
color: 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:
- il colore di primo piano;
- il colore di sfondo;
- il colore del bordo;
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
oborder-color
.
Sintassi ed esempi
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;}
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;}
div {color: #CC0000;}
Approfondimenti CSS3
Se vuoi aggiornamenti su Gestire il colore con i CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
MongoDB, data processing and aggregation options
Come gestire i Big Data con MongoDB e molto di più