Proprietà dei colori
I colori possono esser definiti nei css attraverso una parola chiave, attraverso la codifica RGB in due metodi: con un codice esadecimale oppure indicando la percentuale di Rosso, verde (Green) e Blue che compongono il colore.
La sintassi da utilizzare è:
- color: key
- color: #rrggbb
- color: #rgb (forma ridotta)
- color: rgb (r, g, b,)
- color: rgb (r%,g%,b%)
Esempi:
{color: red;}
{color:#FF0000;}
{color:#F00;}
{color: rgb(255,0,0); }
{color: rgb(100%,0,0);}
Tutti i codici riportati indicano il colore rosso.
Praticamente i colori vengono indicati in una scala da 0 a 255, in cui 0 indica nessuna presenza e 255 presenza completa del primario. Tali numeri possono esser indicati in percentuale, in forma decimale o esadecimale (FF=255). Attenzione ad aggiungere il # quando si usa la sintassi esadecimale: anche se IE mostra il colore se si scrive {color:F00;} ciò non vuol dire che sia corretto.
La forma ridotta infine è un modo di scrivere un codice hex alleggerendo il peso quando i codici si ripetono: #FC9 è la forma contratta di #FFCC99, ad esempio.
Tabella nome colori -> codici esadecimali, codici rgb.
Il modello RGB è un modello additivo in cui ogni colore è definito dalla somma dei 3 colori primari. La completa somma di tutti e 3 da il bianco, la somma di due primari da i 3 primari sottrattivi: Giallo, Ciano e Magenta.
Approfontimenti: Wikipedia: RGB
Colore e background
Il colore è applicato alle due proprietà: color e background, che definiscono il colore del testo e lo sfondo.
color:
color: <valore>;
Dove il valore può esser assegnato utilizzando uno dei metodi sopra illustrati.
background:
background: <color> | <url> | <repeat> | <position> | <scroll>
Es: background: #F00 url(‘immaginedisfondo’) fixed no-repeat center left fixed;
<color> può assumere un valore come su indicato, può essere transparent per indicare uno sfondo trasparente o none per non dare nessuno sfondo.
<url> è il percorso dell’immagine di sfondo, da usare nella forma url (<valore>), dove valore può esser inserito tra ‘, ", o senza, e può esser un percorso assoluto o relativo alla posizione del css.
<repeat> può esser uno dei seguenti valori: repeat, opzione di default che fa ripetere l’immagine in orizzontale e verticale, no-repeat: nessuna ripetizione; repeat-x, repeat-y: permettono la ripetizione lungo l’asse orizzontale (x) o verticale (y).
<position> indica la posizione dell’immagine di sfondo. può assumere valori numerici, percentuali o uno dei seguenti: top, center, bottom per il posizionamento verticale, left, center, right per quello orizzontale.
<scroll> può assumere i valori scroll (opz. di default) e fixed per indicare se l’immagine debba seguire o no lo scrolling della pagina.
Le stesse proprietà possono esser indicate singolarmente con:
- background-color: <color>;
- background-image: <url>;
- background-position: <position>;
- background-repeat: <repeat>;
- background-attachment: <scroll>;