Il sito per imparare gratuitamente a fare pagine Web

Attributi Colore e Sfondo CSS

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



© www.web-link.it  Guida CSS Fogli di stile - Ver. 4.8.1    
 

Gli attributi per il per il colore e lo sfondo

Prima di passare in rassegna le categorie di attributi vorrei ricordare ancora una volta la loro sintassi, a prescindere da quale dei vari modi deciderete di usare.

Abbiamo detto che gli attributi devono essere inseriti all'interno di parentesi graffe { } e laddove in HTML verrebbe usato un "=" (uguale) nei css viene invece usato ":" (due punti).

Argomenti consecutivi sono separati da un ";" (punto e virgola) invece che dalla "," (virgola). Inoltre molti argomenti sono divisi da "-" (trattino centrale) che fa parte integrante del nome stesso.



Gli spazi vuoti ed i ritorno a capo non hanno alcuna influenza.

selettore {
  proprietà: valore;
  proprietà: valore;
}


Per i valori fare riferimento a questa tabellina.

Vediamo alcuni degli attributi per il colore e lo sfondo: maggiormente adoperati




color: valore

Questo attributo serve per impostare il colore del testo, fare riferimento alla tabellina per i possibili valori.

p    {color: red;}
div  {color: #990099;}

P {color: red;}

div {color: #990099;}


Torna ad inizio pagina


background-color: valore;

Questo attributo definisce il colore di sfondo di uno style e può essere adoperato indipendentemente dal colore del testo.

Per i possibili parametri fare riferimento alla ormai nota tabellina.

p    {background-color: yellow}
div  {background-color: #33ccff}


P {background-color: yellow;}
continuo a scrivere per meglio
rendere l'idea dello sfondo così applicato.


DIV {background-color: #33ccff;}
continuo a scrivere per meglio
rendere l'idea dello sfondo così applicato.



Torna ad inizio pagina


background-image: url (immagine.gif)

Questo attributo definisce l'immagine di sfondo per un elemento e può essere adoperato indipendentemente dall'immagine e dal colore dello sfondo assegnato alla pagina.

p    {background-image: url(file:immagine.gif);}
div  {background-image: url(logo.gif);}


p {background-image : url(percorso/immagine.gif);}
continuo a scrivere per meglio
rendere l'idea dello sfondo così applicato.


div {background-image: url (logo.gif);}
continuo a scrivere per meglio
rendere l'idea dello sfondo così applicato.

Se associato al tag body diventa lo sfondo di tutta la pagina.

body  {background-image: url("logo.gif");}


Torna ad inizio pagina


background-repeat: repeat | repeat-x | repeat-y | no-repeat

Questo attributo serve per specificare come disporre l'immagine di sfondo quando non si tratta di uno sfondo omogeneo a tinta unita che riempie tutta la pagina:

repeat indica che l'immagine deve essere replicata in orizzontale ed in verticale.

repeat-x deve essere replicata soltanto in orizzontale.

repeat-y deve essere replicata soltanto in verticale.

no-repeat indica che l'immagine non deve essere replicata.

Logicamente questo attributo dovrà necessariamente essere adoperato in abbinamento con background-image illustrato sopra. Questa l'immagine di sfondo adoperata per gli esempi:



{background-image: url(logo.gif); background-repeat: repeat;}
Vedi questo esempio repeat




{background-image: url(logo.gif); background-repeat: repeat-x ;}
Vedi questo esempio repeat-x




{background-image: url(logo.gif); background-repeat: repeat-y;}
Vedi questo esempio repeat-y




{background-image: url(logo.gif); background-repeat: no-repeat;}
Vedi questo esempio no-repeat

Torna ad inizio pagina


background-position: coordinate

Questo attributo definisce il punto da cui iniziare a posizionare l'immagine di sfondo e funziona se abbinato con background-image e background-repeat. Si possono adoperare parole chiave per la posizione orizzontale: left, center, right e parole chiave per la posizione verticale: top, center, bottom.

E' anche possibile esprimere valori percentuali, dove: 0% 0% indica l'angolo in alto a sinistra (default) e: 100% 100% indica l'angolo in basso a destra. Per maggior precisione si possono specificare anche coordinate espresse in mm, cm, inc.

{background-image: url(logo.gif); background-repeat: repeat-y; background-position: 50% 50%;}


{background-image: url(home.gif); background-repeat: repeat-x; background-position: 50% 50%;}

Vedi questi altri esempi:

position 30% 50%

positione left

position center

position right

position top

position top right

position bottom

position bottom left



Torna ad inizio pagina


background-attachment: scroll | fixed

Questo attributo definisce se l'immagine usata come sfondo deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina verticalmente.

{background-image: url(logo.gif); background-attachment: scroll;}

vedi esempio scroll

{background-image: url(logo.gif); background-attachment: fixed;}

vedi esempio fixed



Torna ad inizio pagina


Continua: Posizionare oggetti Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi