Gestione di colori e sfondi
Da questa lezione iniziamo a parlare dei comandi CSS per l'attribuzione degli stili agli elementi, a comprenderne il significato e ad esaminarne le casistiche di utilizzo.
Parliamo dunque della gestione di colori e sfondi.
Un testo può essere colorato come meglio ci piace, semplicemente utilizzando la proprietà color, come abbiamo visto negli esempi delle lezioni precedenti e come rivediamo nel seguente esempio:
div
{
color: #FF0000;
}
Per la gestione degli sfondi utilizziamo la proprietà di base background che funziona come nell'esempio seguente:
div
{
background: #FFFF00;
}
E' importante sottolineare una cosa: ogni sito deve avere sempre e comunque il colore di sfondo e del testo di default settato body, anche se intendiamo avere testo nero su sfondo bianco com'è normalmente di default, dato che un utente può avere una diversa impostazione del browser e visualizzare male le nostre pagine se non specifichiamo quel che diamo per scontato.
In virtù di quanto detto, prendiamo la sana abitudine di regolarci come segue:
body
{
background: #FFFFFF; /* SFONDO BIANCO */
color: #000000; /* TESTO NERO */
}
Approfitto per dire che in CSS i simboli /* e */ rappresentano un commento, quindi il contenuto non verrà interpretato come codice e non verrà eseguito.
Notiamo anche che ogni riga compresa all'interno delle parentesi graffe (ovvero il codice da attribuire ad un singolo elemento) termina con un punto e virgola che è obbligatorio utilizzare.
Vediamo adesso le principali proprietà legate allo sfondo di una pagina o di un elemento di una pagina Web.
- background-image - imposta un'immagine di sfondo;
- background-repeat - gestisce la ripetizione dell'immagine di sfondo sulla pagina;
- background-position - imposta la posizione dell'immagine di sfondo.
Impostiamo un'immagine di sfondo alla pagina:
body
{
background: #FFFFFF;
background-image: url(immagine.gif);
color: #000000;
}
La porzione di codice che ci interessa è evidenziata in grassetto.
Il comando url specifica il nome ed il percorso dell'immagine da utilizzare come sfondo.
Possiamo adesso gestire la ripetizione dell'immagine sulla pagina; omettendo l'apposito comando l'immagine si ripeterà per quanto spazio avrà a disposizione: si ipotizzi un'immagine di sfondo di 50X50 pixel che si ripete su un'area della pagina di 700 pixel.
Abbiamo a disposizione i seguenti valori predefiniti per la proprietà background-repeat:
- repeat-x - ripete l'immagine solo in orizzontale;
- repeat-y - ripete l'immagine solo in verticale;
- no-repeat - non ripete mai l'immagine.
body
{
background: #FFFFFF;
background-image: url(immagine.gif);
background-repeat: no-repeat;
color: #000000;
}
La porzione di codice che ci interessa è evidenziata in grassetto.
Concludiamo con la gestione della posizione dell'immagine di sfondo; la proprietà background-position accetta la distanza dall'alto e dal margine sinistro della pagina.
Vediamo dunque un esempio con la porzione di codice che ci interessa evidenziata in grassetto:
body
{
background: #FFFFFF;
background-image: url(immagine.gif);
background-repeat: no-repeat;
background-position: 10px 10px;
color: #000000;
}
Si testino gli esempi per verificarne il risultato.
