logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Come gestire lo sfondo

Esamineremo in questa lezione le proprietà relative alla gestione dello sfondo. All'interno di una pagina web, oltre a utilizzare del testo, delle immagini o dei links, si può abbellire il tutto inserendo colori o immagini di sfondo, in modo da rendere più completo il nostro documento, utilizzando ovviamente i fogli di stile. Questo perchè anche l'occhio vuole la sua parte.

Inizialmente, all'origine del linguaggio Html, le proprietà dello sfondo, erano applicate a due soli elementi: al corpo principale della pagina (<body>) e alle tabelle (<table>). Grazie ai CSS adesso queste limitazioni vengono spazzate via e le proprietà dello sfondo possono essere applicate a tutti gli elementi, con possibilità creative infinite, compatibilità permettendo.

Allo sfondo possiamo applicare diverse proprietà, di seguito elencate:

Questo cosa vuol dire: che la proprietà css background permette di personalizzare lo sfondo d’un elemento scegliendo un colore di sfondo appunto, (background-color) o di un’immagine (background-image), decide se questa immagine può essere duplicata o no (background-repeat), posizionata in un certo modo, (background-position) e resa scrollabile o no con il corpo della pagina (background-attachment).

background

Abbiamo visto che la proprietà background permette di definire l'aspetto dello sfondo. Per essere valida, però deve contenere almeno la definizione del colore di sfondo, e la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste pocanzi. Se invece inseriamo tutte le proprità, i valori non vanno separati da virgole, ed è meglio rispettare l'ordine che abbiamo visto all'inizio e cioè A- B- C- D- E.


background-color

La proprietà background-color imposta il colore di sfondo di un elemento. Questa proprietà non è ereditata.

  body {background-color: green; }

Possiamo vedere i 16 nomi dei colori classici che possano inserire in un documento web: una lista completa degli altri nomi è disponibile presso il sito del W3C.

background-color: aqua; (#00FFFF)

background-color: black; (#000000)

background-color: blue; (#0000FF)

background-color: fuchsia; (#FF00FF)

background-color: gray; (#808080)

background-color: green; (#008000)

background-color: lime; (#00FF00)

background-color: maroon; (#800000)

background-color: navy; (#000080)

background-color: olive; (#808000)

background-color: purple; (#800080)

background-color: red; (#FF0000)

background-color: silver; (#C0C0C0)

background-color: teal; (#008080)

background-color: white; (#FFFFFF)

background-color: yellow; (#FFFF00)

I valori che possiamo inserire, sono:

Usando il valore transparent (trasparente), l'elemento non avrà un suo colore specifico, ma erediterà quello dell'elemento parente, come vediamo in questo esempio.


background-image

La proprietà background-image permette di aggiungere un’immagine di sfondo ad un elemento, in formato jpg, gif, png, che sono i formati grafici ammessi dal web per le immagini. Questa proprietà non è ereditata. I valori che possiamo inserire, sono:

Usare la dicitura none, vuol dire non applicare nessuna immagine di sfondo.

     body { background-color: green;
              background-image: url (immagine.jpg);
              }

Se usiamo le immagini come sfondo, queste si ripetono fino a riempire completamente l'intera pagina di qualsiasi dimensione essa sia. Per es. prendiamo questa immagine grafica che useremo come sfondo:

quadrato

e su questo link vediamo il risultato dell'immagine che riempie l'intera pagina.


background-repeat

La proprietà background-repeat, permette di duplicare o no l’immagine di sfondo sia orizzontalmente che verticalmente. Proprietà non ereditata. I valori che possiamo inserire, sono:

     body { background-color: green;;
                background-image: url (immagine.jpg);
                background-repeat:: repeat-y;
                }

Vediamo adesso in questi esempi, come si comporta l'immagine con repeat-x, oppure repeat-y, e infine no-repeat


background-attachment

Con la proprietà background-attachment,, si decide in pratica se l’immagine di sfondo deve scorrere insieme al contenuto, o deve rimanere fissa. Proprietà non ereditata. I valori che possiamo inserire, sono:


     body { background-color: green;;
                background-image: url (immagine.jpg);
                background-repeat: repeat-y;
                background-attachment: fixed;
                }

Vediamo adesso come si comporta l'immagine con scroll e fixed.


background-position

La proprietà background-position permette di sistemare l’immagine di sfondo in posizioni diverse, fà vedere il caso in cui l’immagine non sia ripetuta, oppure la posizione da cui inizierà la ripetizione dell’immagine ecc. Si applica solo agli elementi blocchi. Proprietà non ereditata. I valori che possiamo inserire, sono:

cioè la sintassi, indica che l'immagine sarà sistemata in alto (top), a destra (right), in basso (bottom), a sinistra (left) e al centro (center).

     body {
                background-color: green;;
                background-image: url (immagine.jpg);
                background-repeat: repeat-y;
                background-attachment: fixed;
                background-position: right;
                }

Nell'esempio che segue vediamo una immagine posizionata usando l'unità di misura dei pixel. L'immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra. esempio

In quest'altro invece l'immagine apparirà al centro (center-center). esempio

Adesso vediamo come si comporta l'immagine, con le parole chiave top, right, bottom e left oppure bottom-left e top-right.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice