Rev. 3.0 - Agosto 2005 Ver. 1.0 - Novembre 1999
Gli attributi per il colore e lo sfondo Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.
Per i parametri ad essi associabili fare riferimento a questa tabellina. Passiamo in rassegna gli attributi per il colore e lo sfondo: color : valore; Questo attributo serve per impostare il colore del testo, fare riferimento alla tabellina per i possibili parametri.
P {color: red;} div {color: #990099;} background-color : valore; Questo attributo definisce il colore di sfondo di uno style e può essere adoperato indipendentemente dal colore di sfondo del testo. Per i possibili parametri fare riferimento alla ormai nota tabellina.
P {background-color: yellow;} DIV {background-color: #33ccff;} 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);} continuo a scrivere per meglio rendere l'idea dello sfondo sotto. DIV {background-image: url (logo.gif);} continuo a scrivere per meglio rendere l'idea dello sfondo sotto. Se associato al tag body diventa lo sfondo di tutta la pagina.
background-repeat : repeat | repeat-x | repeat-y | no-repeat ; Questo attributo serve per specificare come disporre le immagini di sfondo quando non si tratta di uno sfondo omogeneo che riempie tutta la pagina: repeat indica che l'immagine deve essere replicata in orizzontale e in verticale. repeat-x deve essere replicata soltanto in orizzontale. repeat-y deve essere replicata soltanto in verticale. Logicamente questo attributo deve essere adoperato in abbinamento a background-image.
{background-image: url(logo.gif); background-repeat: repeat-x ;}
{background-image: url(logo.gif); background-repeat: repeat-y;}
{background-image: url(logo.gif); background-repeat: repeat;}
{background-image: url(logo.gif); background-repeat: no-repeat;} background-position : coordinate; Questo attributo definisce il punto da cui iniziare a posizionare l'immagine e deve essere associato ai due precedentemente illustrati. Si possono adoperare parole chiave per la posizione orizzontale: left, center o right e parole chiave per la posizione verticale: top, center o 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(logo.gif); background-repeat: repeat-x; background-position: 50% 50%;}
{background-image: url(logo.gif); background-repeat: repeat-x; background-position: 10mm 10mm;} background-attachment : scroll | fixed ; Questo attributo definisce se l'immagine usata deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina.
background: parametri; Questo attributo da solo serve per specificare diversi attributi all'interno dello stesso separandoli semplicemente da uno spazio.
Continua: Posizionare oggetti |
||||||||||||||||
Andrea Bianchi |
||||||||||||||||
|