Consentono di controllare la visualizzazioned degli elementi e come si comporta un alemento rspetto ad un altro.


Proprietà:

Proprieta	Descrizione	Valori	Esempi
clear	Imposta i lati di un elemento in cui non è possibile accostarne altri	left right both none	¤ clear ¤
cursor	Specifica il tipo di cursore utilizzato	url auto crosshair default help move pointer e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait	¤ cursor ¤
display	Imposta come e se l’elemento verrà visualizzato	none block compact inline inline-table list-item marker run-in table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	¤ display ¤
float	Imposta dove un elemento apparirà in relazione ad un altro	left right none	¤ float ¤
position	Determina il tipo di posizionamento di un elemento	absolute fixed relative static	¤ position ¤
visibility	Se l’elemento deve essere visibile o no	collapse hidden visible	¤ visibility ¤

clear

Imposta i lati di un elemento in cui non è possibile accostarne altri

Valori possibili sono:

• left
• right
• both
• none

Esempio

#ClearRight {
  border: 1px solid #000000 ;
  height: 140px;
  width: 140px;
  clear: right
}
.elemento {
  border: 1px solid #000000 ;
  height: 140px;
  width: 140px;
  clear: both;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

cursor

Specifica il tipo di cursore utilizzato

Valori possibili sono:

• url
• auto
• crosshair
• default
• help
• move
• pointer
• e-resize
• ne-resize
• nw-resize
• n-resize
• se-resize
• sw-resize
• s-resize
• w-resize
• text
• wait

Esempio

.Manina {
  cursor: pointer;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

display

Imposta come e se l’elemento verrà visualizzato

Valori possibili sono:

• none (Non visualizzato)
• block (Elemento visualizzato come un blocco, con una interruzione di linea alla fine)
• compact (Elemento visualizzato come block o inline in base al contesto)
• inline (Elemento visualizzato in linea, senza interruzione di linea prima o dopo l’elemento)
• inline-table (Elemento visualizzacome una tabella inline (come <table>), senza interruzione di linea)
• list-item (L’elemento è visualizzato come una lista)
• marker
• run-in (Elemento visualizzato come block o inline in base al contesto)
• table (Elemento visualizzacome un blocco tabella (come <table>))
• table-row-group (Elemento visualizzato come un gruppo di una o più righe (come <tbody>))
• table-header-group (Elemento visualizzato come un gruppo di una o più righe (come <thead>))
• table-footer-group (Elemento visualizzato come un gruppo di una o più righe (come <tfoot>))
• table-row (Elemento visualizzato come una riga di tabella (come <tr>))
• table-column-group (Elemento visualizzato come un gruppo di una o più colonne (come <colgroup>))
• table-column (Elemento visualizzato come una colonna (come <col>))
• table-cell (Elemento visualizzato come la cella di una tabella (come <td> e <th>))
• table-caption (Elemento visualizzato come la caption di una tabella (come <caption>))

Esempio

<style>
ul.menuLaterale {
  width:120px;
  margin: 0;
  padding: 0;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  font-variant:small-caps;
  font-weight:bold;
  color:#fff;
}
ul.menuLaterale li {
  display:inline; /*Dispone la lista*/
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:10px;
  font-variant:small-caps;
  font-weight:bold;
  color:#fff;
}
ul.menuLaterale li a {
  display:block; /*Permette di colorare tutto l'elemento*/
  text-decoration:none;
  text-indent:4px;
  padding:0 4px;
  height:30px;
  line-height:30px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  font-variant:small-caps;
  font-weight:bold;
  color: #fff;
  cursor:pointer;
  background-color: #586E85;
  background-position:left;
  background-repeat:no-repeat;
}
ul.menuLaterale li a:hover {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  font-variant:small-caps;
  font-weight:bold;
  color: #00254F;
  cursor:pointer;
  background-color: #C2C5CA;
}
</style>
<ul class="menuLaterale">
  <li><a href="#">Link 1</a></li><br/>
  <li><a href="#">Link 2</a></li><br/>
  <li><a href="#">Link 3</a></li><br/>
  <li><a href="#">Link 4</a></li>
</ul>

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

float

Imposta dove un elemento apparirà in relazione ad un altro

Valori possibili sono:

• left (a sinistra)
• right (a destra)
• none (dove viene inserito)

Esempio

<html>
<style>
body {
  margin: 2px;
  padding: 0px;
}
#BloccoInAlto {
  width: 400px;
  height: 30px;
  padding: 0px;
  clear: both;
  border: 1px solid #000;
}
#BloccoDestra {
  width: 100px;
  height: 300px;
  padding: 0px;
  float: left;
  border: 1px solid #000;
}
#BloccoSinistra {
  width: 300px;
  height: 300px;
  padding: 0px;
  float: left;
  border: 1px solid #000;
}
#BloccoInBasso {
  width: 400px;
  height: 30px;
  padding: 0px;
  clear: both;
  border: 1px solid #000;
}
</style>
<body>
  <div id="BloccoInAlto">&nbsp;</div>
  <div id="BloccoDestra">&nbsp;</div>
  <div id="BloccoSinistra">&nbsp;</div>
  <div id="BloccoInBasso">&nbsp;</div>
</body>
</html>

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

position

Determina il tipo di posizionamento di un elemento

Valori possibili sono:

• static (Elemento posizionato in una posizione normale, così come viene letto)
• relative (Sposta l’elemento in relazione alla sua normale posizione.)
• absolute (Possiamo posizionare l’elemento ovunque nella pagina.)
• fixed

Esempio

#PosizioneAssoluta {
  position:absolute;
  left:40px;
  top:40px;
  border: 1px solid #000000 ;
  height: 140px;
  width: 140px;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---

visibility

Se l’elemento deve essere visibile o no

Valori possibili sono:

• visible (Elemento visibile)
• hidden (Elemento invisibile)
• collapse (In genere si comporta come hidden)

Esempio

span.Visibile {
  visibility: visible;
}
span.Nascosto {
  visibility: hidden;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

---