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.

Gestione della posizione

Passiamo adesso alla seconda lezione sul posizionamento degli elementi, e più precisamente analizzeremo dove un elemento và a collocarsi, grazie alle proprietà visibility, clip e z-index che influiscono invece sull'aspetto visuale dei box definendone la visibilità e la relazione con gli altri box presenti nella pagina.

1- visibility: Questa proprietà stabilisce se un elemento debba essere visibile o rimanere nascosto sulla pagina web, che stiamo visualizzando in quel momento.

   #div2 { visibility: hidden; }

I due valori che possiamo inserire per questa proprietà, sono:

Per capire meglio, guardiamo la solita pagina di esempio


2- clip: Questa proprietà definisce la parte di un elemento posizionato che deve essere visibile. Nella definizione che ne è stata data con CSS2 non è supportata da nessun browser.


3- z-index: Questa proprietà determina l'ordine con cui gli elementi si sovrappongono uno sull'altro, da cui ne scaturisce una scala di livelli (layer), molto simili ai layer sovrapposti di Photoshop. Quando posizioniamo un elemento, infatti è possibile che questo si sovrapponga ad un altro rendendolo illeggibile. Impostando lo z-index è possibile modificare l'ordine di tutti gli elementi.

   div1 { z-index: 1; }

Come potete notare, l'immagine sottostante ha uno z-index, impostato a 5 livelli dove l'elemento con il numero più alto si sovrappone all'elemento con numero più basso. In questo caso i numeri si seguono uno dopo l'altro (1-5) e nella sintassi del codice la cosa importante è la sequenza cronologica dei numeri (l'ordine).

z-index

I due valori che possiamo inserire per questa proprietà, sono:

Per capire meglio, questa proprietà visualizziamo la pagina di esempio

^ 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