In HTML classico lo sfondo viene impostato all'interno della marcatura <BODY>
attraverso gli attributi bgcolor (per il colore univoco del fondo pagina) e background
(per assegnare allo sfondo un'immagine gif o jpg). I limiti di questi strumenti sono evidenti
soprattutto quando e' necessario inserire un'immagine di sfondo complessa. Esiste un attributo
di HTML che permette, solo con MS Internet Explorer, di rendere fissa l'immagine di sfondo
richiamata con background:
<BODY background="sfondo.gif" bgproperties="fixed">
Come detto e' una soluzione funzionante solo con il browser Microsoft. Gli utenti
Netscape non incontreranno alcun messaggio di errore, ma soltanto una pagina con il
classico sfondo che "scrolla" insieme al resto del documento
Le specifiche dei CSS introducono, anche per i colori di sfondo, delle importanti novita', volte soprattutto a liberare gli sviluppatori da vincoli operativi.
Esistono vari attributi per i colori e gli sfondi, ecco quali.
Attributo color
L'attributo color definisce il colore del testo del documento (non si confonda con il colore di background) sia con i nomi dei colori in inglese (black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal e aqua) sia con triplette esadecimali.
Il formato RGB usa, per definire i colori, tre numeri interi compresi tra 0 e 255, mediante una scala di valori lineare. Il rosso, quindi, diventa 255,0,0 e le sfumature cromatiche si realizzano attraverso le combinazioni di valori.
In HTML i valori numerici dei colori vengono definiti in base alla cosidetta "tripletta esadecimale", ovvero un insieme di tre numeri e due cifre esadecimali.
<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; color:blue">
Con il distace learning si cerca di sviluppare abilità, tecniche e strategie di studio che trovano un forte supporto nell'utilizzo delle tecnologie Internet/Intranet.
</DIV>
Attributo background-color
Questo attributo determina il colore di sfondo di un determinato stile. La sua funzione e' simile al classico BODY di HTML, ma puo' essere avvicinato al colore di sfondo delle tabelle. Viene usato soprattutto per evidenziare con espedienti cromatici alcune parti del documento.
<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-color:blue">
Con il distace learning si cerca di sviluppare abilità, tecniche e strategie di studio che trovano un forte supporto nell'utilizzo delle tecnologie Internet/Intranet.
</DIV>
Attributo background-image
Ha una funzione simile al background="image.gif" di HTML classico, richiamando un'immagine in formato GIF o JPG caricata sullo sfondo del css
<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-image: url(sfondo.jpg)">
Con il distace learning si cerca di sviluppare abilità, tecniche e strategie di studio che trovano un forte supporto nell'utilizzo delle tecnologie Internet/Intranet.
</DIV>
Attributo background-repeat
Questo attributo consente di ripetere l'immagine di sfondo cosi' come accade per il tag BODY di HTML. Puo' assumere diversi valori: repeat (l'immagine viene replicata per verticale e orizzontale), repeat-x (replica l'immagine solo per orizzontale), repeat-y (replica l'immagine solo per verticale):
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-y">
Con il distace learning si cerca di sviluppare abilità, tecniche e strategie di studio che trovano un forte supporto nell'utilizzo delle tecnologie Internet/Intranet.
</DIV>
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-x">
Con il distace learning si cerca di sviluppare abilità, tecniche e strategie di studio che trovano un forte supporto nell'utilizzo delle tecnologie Internet/Intranet.
</DIV>
Attributo background-position
I fogli di stile consentono di scegliere un punto di inizio per l'immagine di sfondo diverso dal classico angolo in alto a sinistra. HTML classico, infatti, e' impostato perche' lo sfondo venga visualizzato dal punto piu' estremo in alto a sinistra. Con i CSS e' possibile usare alcune parole chiave per il posizionamento in verticale (top, center e bottom) ed orizzontale (left, center e right). Se sono espresse due coordinate, la prima e' orizzontale e la seconda verticale:
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-position: right top">
Con il distace learning si cerca di sviluppare abilità, tecniche e strategie di studio che trovano un forte supporto nell'utilizzo delle tecnologie Internet/Intranet.
</DIV>
Attributo background
E' un attributo che consente di definire univocamente i diversi attributi dello sfondo finora esaminati. L'ordine da seguire e' il seguente:
<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:300px; background: yellow url(sfondo.jpg) repeat-y fixed right bottom">
Con il distace learning si cerca di sviluppare abilità, tecniche e strategie di studio che trovano un forte supporto nell'utilizzo delle tecnologie Internet/Intranet.
</DIV>
raggruppare stili
