I colori e gli sfondi

Dopo aver visto come si adoperano i links, le immagini grafiche ed il testo siamo praticamente in grado di produrre un documento completo in xhtml ma anche l'occhio vuole la sua parte per questo che vedremo come abbellire il documento con colori e/o immagini di sfondo facendo uso del foglio di style.

Il colore del testo è definito dalla proprietà color alla quale è possibile assegnare uno qualsiasi dei 16 milioni di colori disponibili. Stessa cosa per il colore di sfondo definito dalla proprietà background-color che accetta gli stessi valori assegnabili a color con l'aggiunta del valore transparent.

Se non vengono specificati i colori, siano questi per il testo e/o per lo sfondo, saranno usati quelli scelti dalle impostazioni del sistema operativo dell'utente, a questo proposito è bene specificare sempre entrambi i due parametri per evitare che magari un testo (o uno sfondo) di un colore possa risultare uguale o simile ad un colore di un testo o di uno sfondo impostato dall'utente nel proprio sistema operativo. Specificandoli entrambi si avrà la certezza di una buona leggibilità sempre, a prescindere dalle impostazioni personalizzate. Ritengo che non ci sia cosa peggiore che visitare un sito che costringe ad uno sforzo visivo per leggere testi scritti magari in rosso o in blu su sfondo nero, oppure giallo su sfondo bianco, personalmente chiudo la pagina e non ritorno su quel sito neppure se fosse l'unico a trattare l'argomento di mio interesse.

Vediamo come inserire nel nostro foglio di style il colore blu per il testo su sfondo bianco:

Ad inizio corso si è accennato alla eredità dei vari elementi (tags) inseriti all'interno di altri elementi, in base a questa regola tutto quello che viene assegnato all'elemento body, che è padre di tutti gli altri elementi inseriti al suo interno, ne consegue che i parametri assegnati saranno applicati anche a tutti gli altri elementi, a meno che non abbiano una loro definizione personalizzata. Per come inserire i parametri e per i vari attributi e loro valori vi rimando alla Guida CSS.

Oltre ad un colore a tinta unita è possibile usare come sfondo una immagine grafica usando la proprietà background-image che accetta come parametro un url con percorso (assoluto o relativo) seguito dal nome dell'immagine da adoperare che dovrà essere di tipo gif, jpg o png, gli stessi formati grafici ammessi dal web per le immagini.

Le immagini usate come sfondo si ripetono fino a riempire completamente l'intera pagina di qualsiasi dimensione questa venga visualizzata e scorrono insieme al testo a meno che non si intervenga su apposite proprietà che ne cambiano il comportamento di default, vediamo un esempio, questa l'immagine grafica che useremo come sfondo:




e su questo link il risultato dell'immagine che riempie l'intera pagina.

Gli sfondi colorati a tinta unita o fatti da immagini grafiche sono possibili anche a singole parti di codice all'interno dello stesso documento, praticamente quello che vedete nei vari box di questo corso oppure un esempio più marcato come questo:

Ho voluto usare un colore rosso su uno sfondo variopinto per evidenziare meglio e maggiormente quanto detto all'inizio di questa lezione: la difficoltà di leggere un testo quando non c'è il giusto contrasto cromatico e la giusta differenza di luminosità con lo sfondo.

Ci sono altre proprietà che è possibile adoperare insieme alla proprietà background-image, si tratta di:

background-attachment: scroll
background-attachment: fixed

Con valori scroll o fixed
Servono per tenere fermo lo sfondo mentre si scorre lungo la pagina, per default lo sfondo scorre con la pagina, scroll se si adopera fixed lo sfondo resta fermo.
(su i due links è possibile vedere un esempio pratico)

background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat: no-repeat

Con valori repeat-y o repeat-x o no-repeat
Servono per avere una ripetizione dell'immagine di sfondo non su tutta la pagina ma soltanto in senso verticale: repeat-y o soltanto in senso orizzontale: repeat-x o nessuna ripetizione: no-repeat
(su i tre links è possibile vedere un esempio pratico)

Con background-repeat: no-repeat è possibile adoperare un'altra proprietà:
background-position: xxx yyy

con i seguenti possibili valori:

xxx

background-position: top
background-position: center
background-position: bottom

yyy

background-position: left
background-position: center
background-position: right

o posizioni numeriche con

background-position: 100px, 50px
background-position: 50%,30%

Con valori top, center, bottom, left, right, valori numerici, valori in percentuale
che servono per posizionare l'immagine di sfondo in alto, al centro in basso, a sinistra, a destra, ad una precisa distanza dai bordi, ad una distanza dai bordi che varia in percentuale della finestra del browser.

E' possibile adoperare uno solo valore di x o di y o combinarli entrambi come in questi esempi: bottom left, top right e tutte le altre possibili combinazioni.
(su i vari links è possibile vedere un esempio pratico)


Con questa lezione avete imparato ad usare i colori e le immagini grafiche di sfondo, nella prossima lezione vedremo cosa si deve inserire nella parte head e l'importanza dei meta comandi per essere reperiti meglio dai motori di ricerca.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.