A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

12.2 I piani

Nell'ultimo esempio abbiamo visto come le immagini possano sovrapporsi. Si sono però disposte nell'ordine in cui le abbiamo inserite nell'HTML: la prima sotto, la seconda in mezzo e la terza sopra le altre.

Utilizzando l'elemento di stile z-index possiamo però agire anche su questo aspetto e decidere quale delle tre immagini debba disporsi in primo piano rispetto alle altre indipendentemente dall'ordine di in cui sono inserite nel linguaggio HTML.

Il valore dell'elemento di stile è un numero. L'immagine che avrà un valore di z-index più elevato sarà in primo piano rispetto a tutte le altre.

Supponiamo, utilizzando l'esempio precedente, che il cerchio blu, che si trovava in mezzo alle altre immagini, debba apparire in primo piano. Al selettore di identità che lo identifica aggiungeremo l'elemento di stile ed il valore z-index:1 trasformandolo in questo modo:

#cerchio {position: absolute;left:300px; top:150px; z-index:1}

Vediamo l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #quadrato {position: absolute;left:300px; top:150px}
     #cerchio {position : absolute; left:325px; top:175px; z-index:1}
     #rombo {position : absolute; left : 350px; top: 200px}
     </style>
     </head>
     <body>
     <p id="quadrato"><img src="img/rosa.gif" width="100"
     height="100"></p>
     <p id="cerchio"><img src="img/blu.gif" width="100" height="100">
     </p>
     <p id="rombo"><img src="img/verde.gif" width="100"
      height="100"></p>
     </body>
</html>

anteprima

Il cerchio adesso è in primo piano nonostante nulla sia cambiato all'interno del linguaggio HTML. La modifica è stata apportata dall'elemento di stile z-index:1 associato, appunto, all'immagine del cerchio.

Ma esiste un'altra particolarità interessante. Occorre sapere che il piano del testo ha valore 0. Quindi se noi assegnamo all'elemento di stile z-index un valore inferiore allo 0 cosa succederà? Che l'immagine finirà sotto al testo! Non ci credi? Guarda l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #quadrato1 {position: absolute; left:200px; top:150px}
     #quadrato2 {position: absolute; right:200px; top:150px; z-index : -1}
     </style>
     </head>
     <body>
     <p>Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani.</p>
     <p id="quadrato1"><img src="img/rosa.gif" width="100"
     height="100"></p>
     <p id="quadrato2"><img src="img/rosa.gif" width="100"
     height="100"></p>
     </body>
</html>

anteprima

Come hai potuto vedere il primo quadrato, che è privo dell'elemento di stile z-index (il che equivale a z-index:0), si è disposto in posizione assoluta sopra il testo. Il secondo quadrato, che ha un elemento di stile z-index:-1, si è disposto sempre in posizione assoluta, ma sotto il testo: lo scritto è infatti visibile sopra di esso.

Tutti ciò che è stato mostrato vuole essere solo una panoramica degli effetti spettacolari che si possono ottenere con un uso attento delle immagini e dei piani: tutto sta ovviamente nella tua creatività.

Conclusioni

Ci sarebbero ancora tante cose da dire sui fogli di stile, ma ci fermiamo qui perché, con queste nozioni, oramai sei senz'altro in grado di creare un gruppo di pagine web senza curarti troppo della parte estetica perché sai che lo potrai fare automaticamente ricorrendo ad un foglio di stile esterno che ne renderà l'apparenza omogenea.

Ah, a proposito, l'aspetto complessivo di questo manuale è dato da un unico foglio di stile esterno (tranne le pagine di esempio) e da alcuni fogli di stile in linea per la formattazione di particolari sezioni di testo.

Se sei curioso di sapere come apparirebbe questo manuale se non vi fosse applicato il suo foglio di stile, CLICCA QUI' e vedrai una pagina del manuale "nuda e cruda", come Seatiger l'ha fatta.

Se vuoi approfondire l'argomento e se conosci l'inglese puoi far ricorso al World Wide Web Consortium (W3C) dove troverai anche

le specifiche sui fogli di stile livello 1 o CSS1
le specifiche sui fogli di stile livello 2 o CSS2

questi ultimi non ancora totalmente supportati dai browser più comuni e recenti ed anche notizie sull'avanzamento del nuovo progetto sulla versione CSS3.

A noi non resta che ringraziarti per esserti scaricato o per aver letto online il nostro manuale sicuri che le nozioni in esso contenute potranno esserti di aiuto nella tua attività di Webmaster e, ricorrendo ad un foglio di stile, perché con il solo HTML sarebbe impossibile, ti salutiamo con un grosso...

CIAO!