A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 2

Sfondi

2.1 Colore di sfondo

Il colore di sfondo predefinito di un documento HTML è il bianco, ma naturalmente si può cambiare con molta facilità. Vediamo coma farlo con un foglio di stile "interno":

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">body { background:#FFFF00; color:#000000 }
     </style>
     </head>
     <body>
     <p>I contenuti della pagina vanno qui</p>
     </body>
</html>

anteprima

La stringa:
body { background:#FFFF00 } cambierà il colore di sfondo in giallo. Si possono usare, al posto del formato esadecimale, anche i nomi dei colori in lingua inglese. Ad esempio con la stringa body { background:yellow } si otterrà lo stesso risultato, ma l'utilizzo del formato esadecimale consentirà di adottare sfumature di colore altrimenti non ottenibili. Analogamente si possono usare colori anche in formato rgb utilizzando la stringa body { background:rgb(255,255,0) }

Nota 1:
I colori espressi in formato esacimale devono essere preceduti dal simbolo della celletta #

Nota 2:
Come avrai notato, sono stati utilizzati due simboli, le parentesi graffe, non presenti in una normale tastiera. Poiché sono simboli ricorrenti nella creazione dei fogli di stile, occorre spiegare come ottenerli:

la parentesi graffa aperta { si ottiene tenendo premuti contemporaneamente i tasti "maiuscolo (Shift)", "control (Ctrl)", "alterna (Alt)", digitando la lettera è e rilasciando i tasti;
la parentesi graffa chiusa } si ottiene tenendo premuti contemporaneamente i tasti "maiuscolo(Shift)", "control (Ctrl)", "alterna (Alt)", digitando il simbolo + (attenzione quello a fianco della lettera "è" e non quello del tastierino numerico!) e rilasciando i tasti.

2.2 Immagine di sfondo

Ovviamente, al posto di un colore, potresti decidere di utilizzare un'immagine di sfondo. Vediamo coma farlo con un foglio di stile "interno".

Negli esempi utilizzeremo questo sfondo, in modo da rendere visibili gli effetti:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">body { background-image: url("sfondo.jpg") }
     </style>
     </head>
     <body>
     <p>I contenuti della pagina vanno qui</p>
     </body>
</html>

La stringa:
body { background-image: url("sfondo.jpg") userà l'immagine "sfondo.gif" come background. Ovviamente il nome potrà essere anche diverso e potrai usare anche un'immagine ".gif".

anteprima

Nota: se l'immagine da utilizzare come sfondo non fosse nella stessa cartella che contiene il documento HTML, occorrerà modificare il percorso nella stringa. Se, ad esempio, si trovasse in una sottocartella chiamata img la stringa assumerebbe questa forma:
body { background-image: url("img/sfondo.jpg")

Se si trovasse in una cartella superiore chiamata sempre img la stringa assumerebbe questa forma:
body { background-image: url("../img/sfondo.jpg")

Se si trovasse addirittura su un altro spazio web assumerebbe questa forma:
body { background-image:
url("http://www.nomedominio.com/img/sfondo.jpg")

Abbiamo visto come inserire un'immagine di sfondo. Uno potrebbe chiedersi il perché inserire uno sfondo con un foglio di stile, anziché con un semplice comando HTML. Perché con un foglio di stile si possono assegnare delle particolari caratteristiche alle immagini di sfondo, impensabile con il solo HTML, o comunque di difficile attuazione. Vediamo alcuni elementi nei particolari.