dal 2015 - visita n. 691
Gestione sfondo
Gestione sfondo

 

Gestione sfondo

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.

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>


Visualizza l'esempio pratico


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>


Visualizza l'esempio pratico


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>


Visualizza l'esempio pratico


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>


Visualizza l'esempio pratico


<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>

Visualizza l'esempio pratico


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>


Visualizza l'esempio pratico


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>


Visualizza l'esempio pratico



















Particelle
Introduzione
CSS in linea
CSS incorporati
CSS esterni
Attributi per testo
Attributi per margini
Gestione sfondo
Raggruppare stili
Assegnare classi
Posizionamento dinamico
Controlli del cursore



L'uomo superiore deve pensare ci˛ che Ŕ vero, sentire ci˛ che Ŕ bello e volere ci˛ che Ŕ buono.
Von Platten

Valid CSS!
pagina generata in 0.001 secondi