La proprietà color descrive il colore anteriore (colore del testo) degli elementi. La specifica dei colori è possibile attraverso varianti molto differenti. Classicamente si utilizzano valori esadecimali. Questi valori iniziano sempre con un cancelletto precedente. A seguire si trovano di solito tre coppie di numeri e/o lettere. Questi rappresentano il rosso, il verde e il blu. Quindi le specifiche dei colori avvengono sempre secondo lo schema seguente:
RRGGBB
La specifica #ffffff produce un colore bianco. Se invece si utilizza #000000, viene visualizzato il nero come colore. Nei "ragionevoli" editor HTML sono disponibili appositi selettori di colori.
Potete ottenere i codici esadecimali utilizzando. Inoltre, su numerosi siti web (ad es. http://www.farbtabelle.net/) sono disponibili apposite tabelle per i colori.
In CSS è possibile abbreviare la scrittura dei valori esadecimali dei colori. Tuttavia, questo principio non si applica a tutti i valori dei colori. Effettivamente funziona solo se un valore è composto da tre coppie uguali. Esempi tipici sono le definizioni dei colori per il nero e il bianco. Di solito li si scrive così:
.nero {
color: #000000;
}
.bianco {
color: #ffffff;
}
Questa sintassi può anche essere abbreviata.
.nero {
color: #000;
}
.bianco {
color: #fff;
}
In CSS sono ammessi anche i valori RGB. Qui si indicano i valori decimali da 0 a 255, da scrivere separati da virgole. L'ordine delle specifiche dei colori corrisponde a quello dei colori esadecimali.
a {
color: rgb(100%, 100%, 100%);
sfondo: rgb(0, 0, 0);
}
Come mostra l'esempio, sono possibili anche le specifiche in percentuale, anche se nella pratica sono piuttosto rare.
Un'altra variante per le definizioni dei colori sono le parole chiave di colore. Ecco alcuni esempi:
• nero
• rosso
• blu
• giallo
• bianco
• verde
Una definizione corrispondente potrebbe essere la seguente:
p {
color: bianco;
background: nero;
}
Si noti che con CSS3 la gamma di parole chiave di colore disponibili è stata ulteriormente ampliata. CSS3 ha infatti adottato i nomi dei colori dalla specifica SVG. Un elenco dei nomi dei colori disponibili si trova su http://www.w3.org/TR/SVG/types.html#ColorKeywords.
Definizione dello sfondo
Con sfondo si tratta di un insieme dei seguenti valori possibili, che saranno presentati dettagliatamente nelle sezioni successive di questo tutorial:
• allegato-sfondo
• colore-sfondo
• immagine-sfondo
• posizione-sfondo
• ripetizione-sfondo
Le singole specifiche vanno scritte separate da spazi. L'ordine in cui si fa non importa. Non tutti i valori devono essere specificati.
Un esempio:
p {
sfondo: trasparente
url(logo.jpg)
scroll ripeti 0% 0%;
}Colori di sfondo
Per assegnare un colore di sfondo a un elemento si utilizza la proprietà colore-sfondo.
div {
colore-sfondo: #009999;
}
Come valore si indica il colore desiderato.
Immagini di sfondo
immagine-sfondo definisce un'immagine come sfondo. Se questa proprietà viene specificata in un file CSS esterno, i percorsi relativi si riferiscono alla directory in cui si trova il file CSS.
• nessuna - nessuna immagine di sfondo
• URI - percorso dell'immagine
Anche qui un esempio.
<div style="immagine-sfondo:url(hinten.jpg); margine:20px; riempimento:20px">
Benvenuti su PSD-Tutorials.de!
</div>
Tuttavia, si prega di procedere con cautela nell'uso di immagini di sfondo. Perché le immagini di sfondo troppo evidenti non facilitano esattamente la leggibilità dei testi.
Certo, ci sono sicuramente siti web in cui conta solo l'aspetto visivo. Qui si può certamente lavorare con sfondi più evidenti.
Sfondi scorrevoli
Per elementi più lunghi, l'immagine di sfondo si sposta con lo scorrimento della pagina. Con allegato-sfondo è possibile evitarlo.
• fisso - seguire lo scroll
• scorrimento - l'immagine di sfondo rimane ferma e si allinea alla finestra del browser (visualizzatore).
La proprietà allegato-sfondo di solito viene utilizzata in combinazione con immagine-sfondo.
Un esempio:
div.fest{
background-image: url(sfondo.gif);
background-repeat: no-repeat;
}La posizione dello sfondo
Con la proprietà background-repeat si stabilisce a che posizione dello sfondo deve iniziare. Il punto di riferimento è l'elemento per il quale è stata definita l'immagine.
• Percentuale - uno o due valori che determinano la distanza dell'immagine dall'angolo in alto a sinistra dell'elemento. Con due valori, il primo rappresenta la distanza orizzontale, il secondo quella verticale. Il punto di riferimento non è l'angolo in alto a sinistra dell'immagine, ma un punto all'interno dell'immagine, anch'esso indicato dai valori x/y.
• Lunghezza - determina la distanza tra l'angolo in alto a sinistra dell'immagine e l'angolo in alto a sinistra dell'elemento. Sono ammessi uno o due valori. Se sono indicati due valori, il primo determina la distanza orizzontale, il secondo quella verticale.
Inoltre, sono possibili anche le seguenti parole chiave:
• left - allineato orizzontalmente a sinistra
• center - centrato
• right - allineato orizzontalmente a destra
• top - allineato verticalmente in alto
• bottom - allineato verticalmente in basso
Ecco un esempio di come potrebbe apparire:
p{
background-position: 8em top;
}Immagini di sfondo ripetute
Se e come un'immagine di sfondo viene ripetuta se è più piccola dell'area visualizzata può essere determinato con background-repeat.
• repeat - l'immagine di sfondo viene ripetuta riempiendo l'elemento verticalmente ed orizzontalmente.
• repeat-x - l'immagine viene ripetuta solo orizzontalmente.
• repeat-y - l'immagine viene ripetuta solo verticalmente.
• no-repeat - l'immagine non viene ripetuta.
Anche in questo caso un esempio:
body{
background-repeat: repeat-y;
}
In questo caso, l'immagine viene ripetuta solo verticalmente.
Se si utilizza repeat-y, la ripetizione avviene solo orizzontalmente.
Questo tutorial ha dimostrato quanto sia potente CSS anche nel campo dei colori e delle immagini.
