Livello di difficoltà: |
|
I Css, Cascade style sheets, che in italiano significa fogli di stile a cascata, sono una tecnologia per migliorare le proprie pagine Web. Sono stati implementati dal W3 Consorzium nella quarta versione di Html.
|
| |
Definire lo sfondo e le proprietà in un documento
Cascade style sheets
Il successo grafico di un sito web, si identifica nel layout e nel background di tali pagine. Una prerogativa dei Css, e' infatti quella di poter predefinire il layout e lo sfondi di uno o piu' documenti Html.
Vediamo ora come definire tali proprieta' in una pagina web.
Background-color
Definisce un omogeneo colore di sfondo al documento. Questo comando, si puo' applicare anche a normale testo in modo da ottenere una evidenziatura di sfondo. Il codice da utilizzare e':
body { background-color: gray }
Background-image
Applica un'immagine di sfondo al documento. Anche in questo caso, e' possibile applicaere lo sfondo a un solo elemento.
body { background-image: url(http://nomeserver/nomeimg.gif) }
Background-repeat
Determina come l'immagine di sfondo deve essere riprodotta. I valori di questa proprieta' possono essere:
repeat Ripete l'immagine sia verticalmente che orizzontalmente.
repeat-y Ripete l'immagine verticalmente.
repeat-x Ripete l'immagine orizzontalmente.
no-repeat L'immagine non viene ripetuta.
Il sorgente da utilizzare per ottenere questi effetti e':
body { background-repeat: no-repeat }
Background-position
Determina la posizione dell'immagine stabilendo le distanze del margine sinistro e del margine superiore. I valori che puo' assumere sono:
left sinistra.
right destra.
top alto.
bottom basso.
center centro.
Il codice e':
body { background: url(http://nomeserver/nomeimg.gif) left bottom }
Background-attachment
Se specificata, l'immagine di sfondo non scorre insieme al documento. I valori sono:
scroll l'immagine scorre insieme al documento (di default).
fixed l'immagine non scorre insieme al documento.
body { background-attachment: fixed }
Background
Per unire piu' proprieta' a un solo tag, si utilizza la dicitura background, per esempio:
body { background:gray url(http://tuosito.it/nomeimg.gif) norepeat }
|
