I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

Gli attributi per il posizionamento dei livelli  

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all’interno di parentesi graffe { } e laddove in HTML verrebbe usato un “=” (uguale) viene invece usato “:” (due punti). Argomenti consecutivi sono separati da “;” (punto e virgola) invece che da “,” (virgola). Inoltre molti argomenti sono divisi da – (trattini) anche se questi fanno parte integrante del nome stesso.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Prima di passare in rassegna i vari attributi di posizionamento è bene ricordare che questi difficilmente saranno adoperati singolarmente, essi infatti fanno parte di un insieme di altri parametri che servono a definire e posizionare un contenitore o livello all’interno di una pagina web.

La creazione di un livello tipo potrebbe essere questa, già vista nella lezione riguardante gli ID:

position : absolute | relative ; Determina il tipo di posizionamento che dovrà assumere il contenitore creato sullo schermo in uno dei possibili modi.

Absolute o Relative, in entrambi i casi l’attributo ha ragione di esistere se abbinato con gli altri attributi di posizionamanto.

Contenitore o livello posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser.

top : lunghezza | percentuale | auto ; Determina la distanza del margine superiore del contenitore dal margine superiore della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella tabella parametri.

Contenitore o livello posizionato in modo assoluto a 50 px dal bordo superiore e 100 px dal lato sinistro della finestra del browser.

left : lunghezza | percentuale | auto ; Determina la distanza del margine laterale sinistro del contenitore dal margine laterale sinistro della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella tabella parametri.

Contenitore o livello posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser.

width : larghezza ; Determina la larghezza del contenitore se posizionato in modo absolute.

Contenitore o livello con una sua dimensione in larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser.

height : altezza ; Determina l’altezza del contenitore se posizionato in modo absolute.

Contenitore o livello con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.

visibility : visible | hidden | inherit ; Determina la visibilità del contenitore, questo infatti potrebbe sparire se associato al suo attributo hidden.

Contenitore o livello nascosto, con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible.

z-index : valore; Determina la priorità di visualizzazione del contenitore rispetto allo sfondo della pagina o rispetto ad altri contenitori posizionati sullo schermo.

Contenitore o livello con priorità negativa (-1) che lo posiziona addirittura sotto lo sfondo (non tutti i browser lo gestiscono se negativo) con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible.

Continua: Conclusioni