|
|
|
Sfondi2.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>
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".
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. 2.2.1 Immagine di sfondo - Attachment Determina se lo sfondo deve rimanere fisso (default) oppure muoversi con il testo. Ha due possibili valori: fixed scroll <html> <head> <title>Titolo del documento</title> <style type="text/css">body { background-image: url("sfondo.jpg"); background-attachment: fixed } </style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html> La stringa: background-image: url("sfondo.jpg"); background-attachment: fixed fa si che l'immagine dello sfondo rimanga statica, mentre il contenuto della pagina scorre.
<html> <head> <title>Titolo del documento</title> <style type="text/css">body { background-image: url("sfondo.jpg"); background-attachment: scroll } </style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html> La stringa: background-image: url("sfondo.jpg"); background-attachment: scroll fa si che sia l'immagine dello sfondo che il contenuto della pagina scorrano assieme.
2.2.2 Immagine di sfondo - Repeat Determina come deve replicarsi l'immagine di sfondo. Ha quattro possibili valori: repeat-y repeat-x repeat no-repeat <html> <head> <title>Titolo del documento</title> <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: repeat-y } </style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html> La stringa: background-image: url("sfondo.jpg"); background-repeat: repeat-y fa si che lo sfondo si ripeta solo in una colonna verticale posta sul lato sinistro del monitor lasciando vuoto il resto della pagina.
<html> <head> <title>Titolo del documento</title> <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: repeat-x } </style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html> La stringa: background-image: url("sfondo.jpg"); background-repeat: repeat-x fa si che lo sfondo si ripeta solo in una riga orizzontale posta sul lato superiore del monitor lasciando vuoto il resto della pagina.
<html> <head> <title>Titolo del documento</title> <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: repeat } </style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html> La stringa: background-image: url("sfondo.jpg"); background-repeat: repeat fa sì che lo sfondo si ripeta su tutta la superficie della pagina. Formalmente equivale ad omettere il valore.
<html> <head> <title>Titolo del documento</title> <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: no-repeat } </style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html> La stringa: background-image: url("sfondo.jpg"); background-repeat: no-repeat fa sì che lo sfondo non si ripeta. In pratica appare solo una tessera nell'angolo superiore sinistro della pagina che è poi il punto di origine.
Nota: Gli argomenti si possono anche sommare tra loro, basta che non siano in contrasto. Uno stile come quello riportato qui sotto genererà una pagina <html> <head> <title>Titolo del documento</title> <style type="text/css">body { background-image: url("sfondo.jpg"); background-attachment: fixed; background-repeat: repeat-y } </style> </head> <body> <p>I contenuti della pagina vanno qui</p> </body> </html> La stringa: background-image: url("sfondo.jpg"); background-attachment: fixed; background-repeat: repeat-y farà sì che lo sfondo si ripeta in una colonna verticale posta sul lato sinistro del monitor e che non scorra con il resto del contenuto della pagina. |
segnala ad un amico |
|
|
