LAU

Esempi dimostrativi delle funzionalità di alcune proprietà per la visibilità degli oggetti:

• Esempio 1: la proprietà cursor:help
• Esempio 2: la proprietà float

torna alla lista completa delle proprietà

clear

La proprietà clear viene utilizzata per interrompere l'effetto del box flottante.
La proprietà clear ammette i seguenti valori:

• none (valore predefinito);
• left (annulla l'effetto della dichiarazione float:left);
• right (annulla l'effetto della dichiarazione float:right);
• both (annulla l'effetto di ambedue le dichiarazioni).

#div1{
float:left;
}

#div2{
clear:left;
}

In questo esempio la dichiarazione clear:left; applicata all'elemento #div2 annulla l'effetto della dichiarazione float:left; dell'elemento precedente (#div1).

torna alla tabella

cursor

La proprietà cursor viene utilizzata per specificare il tipo di cursore che sarà visualizzato quando si punta ad un elemento.
La proprietà cursor ammette i seguenti valori:

• url
• auto default (cambia a seconda dell'impostazione del browser);
• crosshair (rende come effetto una crocetta);
• default (solitamente è una freccetta);
• pointer (rende come effetto una manina);
• move (rende come effetto una crocetta per indicare qualcosa che può essere spostato);
• e-resize (indica che il margine di un box può essere spostato verso destra);
• ne-resize (indica che il margine di un box può essere spostato verso nord-est);
• nw-resize (indica che il margine di un box può essere spostato verso nord-ovest);
• n-resize (indica che il margine di un box può essere spostato verso su);
• se-resize (indica che il margine di un box può essere spostato verso sud-est);
• sw-resize (indica che il margine di un box può essere spostato verso sud-ovest);
• s-resize (indica che il margine di un box può essere spostato verso giù);
• w-resize (indica che il margine di un box può essere spostato verso sinistra);
• text (usato per indicare testo);
• wait (il cursore indica che il programma è intasato);
• help (il cursore indica una spiegazione all'elemento su cui ci si è soffermati col mouse; solitamente il cursore assume la forma di un punto interrogativo.

acronym{ 
cursor: help; 
}

In questo esempio il cursore assumerà la forma di un punto interrogativo ogni qualvolta si posizionerà su un testo marcato come acronimo.

torna alla tabella

display

La proprietà display definisce come e se visualizzare un elemento.
La proprietà display ammette i seguenti valori:

• none (l'elemento non verrà visualizzato);
• inline (l'elemento verrà visualizzato come un elemento in linea);
• block (l'elemento verrà visualizzato come un elemento di blocco);
• list-item (l'elemento verrà visualizzato come una lista);
• run-in (l'elemento verrà visualizzato come un elemento di blocco o in linea in base al contesto);
• compact (l'elemento verrà visualizzato come un elemento di blocco o in linea in base al contesto);
• marker
• table (visualizzerà la tabella come un elemento di blocco);
• inline-table (visualizzerà la tabella come un elemento in linea);
• table-row-group (l'elemento sarà visualizzato come un ragruppamento di più righe, <tbody>);
• table-header-group (l'elemento sarà visualizzato come un ragruppamento di più righe, <thead>);
• table-footer-group (l'elemento sarà visualizzato come un ragruppamento di più righe, <tfoot>);
• table-row (l'elemento sarà visualizzato come una riga <tr>);
• table-column-group (l'elemento sarà visualizzato come un ragruppamento di più colonne, <colgroup>);
• table-column (l'elemento sarà visualizzato come una colonna di celle <col>);
• table-cell (l'elemento sarà visualizzato come celle di una tabella, <td>, <th>);
• table-caption (l'elemento sarà visualizzato come <caption>);
• inherit

Si consideri ad esempio il seguente codice:

<ul>
	<li>link1</li>
	<li>link2</li>
	<li>link3</li>
</ul>

Gli elementi di questa lista si disporrano uno dietro l'altro in verticale.
Per disporre tutti gli elementi su una sola linea in orizzontale è sufficiente definire gli elementi <li> come oggetti in linea.
Per disporre tali oggetti in orizzontale è possibile utilizzare la proprietà display:inline;

li{
display:inline;
}

torna alla tabella

float

La proprietà float consente di estrarre gli elementi dal normale flusso per disporli in un ordine diverso.
La proprietà float ammette i seguenti valori:

• none (valore predefinito) indica che l'elemento non deve essere flottante;
• left (indica che l'elemento deve essere flottante a sinistra);
• right (indica che l'elemento deve essere flottante a destra).

img{
float: left;
}

In questo esempio l'elemento img si sposta a sinistra.

torna alla tabella

position

La proprietà position consente di controllare il posizionamento degli elementi nel normale flusso.
La proprietà position ammette i seguenti valori:

• static (predefinito) prevede il normale comportamento degli elementi all'interno del flusso;
• relative (l'elemento si sposta in relazione alla sua normale posizione che assume all'interno del flusso);
• absolute (l'elemento può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all'interno del flusso);
• fixed (l'elemento viene posizionato in modo fisso nella pagina assumendo come punto di riferimento la finestra del browser).
  Il posizionamento fisso trova comunque una scarsa applicazione in quanto non supportato da Internet Explorer 6 e precedenti per Windows.

div{
position: relative; 
left: 2em; 
top: 1em;
}

In questo esempio l'elemento div è posizionato in modo relativo. Tramite i valori assegnati alle proprietà top e left, esso si sposta 1em verso il basso (top) e 2em verso destra (left) rispetto alla posizione che assumerebbe nel normale flusso.

torna alla tabella

visibility

La proprietà visibility consente di controllare la visibilità di un elemento.
La proprietà visibility ammette i seguenti valori:

• visible (valore predefinito) indica che l'elemento sarà normalmente visualizzato;
• hidden (indica che l'elemento sarà invisibile ma, a differenza di quanto avviene con la dichiarazione display:none, l'oggetto non sarà rimosso dalla pagina;
• collapse (serve a rimuovere intere righe o colonne di una tabella);
  Tale proprietà trova comunque una scarsa applicazione in quanto non supportata da Internet Explorer 6 e precedenti per Windows.

div{
visibility:hidden;
}

In questo esempio l'elemento div sarà invisibile ma non rimosso dalla pagina.

torna alla tabella