Abbiamo già affrontato le tematiche relative al colore nei CSS in due precedenti lezioni, più precisamente nella lezione dedicata alla stilizzazione dei bordi (proprietà border-color) e nella lezione dedicata al background (proprietà background-color). In questa lezione vedremo una panoramica generale sull’utilizzo dei colori nei fogli di stile.
I colori nei fogli di stile CSS
Abbiamo già visto che i colori, all’interno dei CSS, possono essere indicati in diversi modi, cioè mediante:
- la notazione esadecimale;
- la notazione RGB
- oppure mediante nome del colore (es. "red" o "yellow")
La notazione esadecimale e quella RGB, in realtà, sono concettualmente molto simili: in entrambe, infatti, viene specificata una combinazione di tre colori base (rosso, verde e blue) attraverso la quale possiamo ottenere il colore di nostro interesse. Possiamo infatti notare come la notazione esadecimale altro non sia che un modo differente di esprimere un colore RG, dove:
0 RGB => 00 HEX
e
255 RGB => FF HEX
Per effettuare la confersione tra i due formati è possibile utilizzare semplici tool reperibili on-line come quello che potete trovare qui.
Per quanto riguarda i nomi dei colori utilizzabili quale valore di una proprietà colore dei CSS, la scelta è tassativa: sino a qualche anno fa era possibile scegliere solo tra i 16 colori standard mentre oggi è possibile optare per uno dei 140 colori della tavolozza estesa che potete trovare a questa pagina.
In questa sede è inutile approfondire ulteriormente la teoria dei colori e della loro rappresentazione all’interno di un programma informatico, ci basti sapere che al fine di stilizzare i nostri documenti HTML possiamo ricorrere, indifferentemente, ad uno dei tre valori ammessi.
La proprietà color
La proprietà color dei CSS consente di impostare un colore per il testo di un elemento. Si tratta di una proprietà che viene ereditata dagli elementi figli quindi, nella definizione dello stile, è bene tenere in debita considerazione questa caratteristica di color.
Vediamo un esempio:
body
{
color: #FF0000;
}Con questa regola abbiamo applicato al corpo della pagina il colore rosso per il testo e siccome tutti gli elementi visibili sono figli di <body> questo colore verrà applicato ad ogni scritta presente in qualsiasi elemento della pagina web (in quanto, come abbiamo detto, questa proprietà viene ereditata).
