Liste e Link

Liste

Liste non ordinate

<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>

Liste ordinate

<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>

Liste di definizione

<dl>
<dt> Termine </dt>
<dd> Definizione </dd>

<dt> Termine </dt>

<dd> Una definizione </dd>

<dd> Un’altra possibile definizione </dd>
<dt> Termine </dt>
<dt> Sinonimo </dt>
<dt> Un altro sinonimo</dt>

<dd> Definizione dei tre termini </dd>
</dl>

Liste CSS

Proprietà : list-style-type

Definisce il tipo di punto elenco

Si applica agli elementi UL e OL, non alle iste di definizione.

Sintassi:
selettore{list-style-type: valore;}

Tipi di valore:
disc | cicle | squaredecimal | decimal-leading-zero | lower-roman | upperroman| lower-alpha | upper-alpha

Esempio:

ol {list-style-type: decimal-leading-zero;}

Proprieta’: list-style-image

Definisce l'URL di un'immagine (su web o sul pc) da usare come marcatore di un list-item al posto dei punti elenco predefiniti.

Sintassi:
selettore {list-style-image: url(url_immagine);}

Esempio:
ul li {list-style-image: url(img/punto_elenco.gif);}

Proprieta’: list-style-position

Imposta la posizione del punto elenco rispetto al box in cui è contenuto il testo list-item.

Sintassi:
selettore {list-style-position: valore;}

Valori:
outside (fuori dal box elemnto)| inside (dentro al box elemento)

Esempio:
ol {list-style-position: inside;}

Link e Ancore

Link sintassi

Permettono di creare una struttura ipertestuale

Sintassi:
<a href=”URL”>etichetta del link</a>

Con l’attributo title=”descrizione” si può fornire una breve decrizione visibile al passaggio del mouse.

Ancore

Permettono di raggiungere sezioni interne alla pagina.

Ancora al punto su cui puntare:
<h2 id=”nome_ancora”>Ancora</h2>

Creare il collegamento:
<a href=”#nome_ancora”>Collegamento all’ancora</a>

Link e Ancore CSS

Pseudo-classi

Una pseudo-classe serve a indicare un particolare stato di un elemento ed è utilizzata per impostare uno stile ad un elemento al verificarsi di certe condizioni.

Es. Link può assumere diversi stati. Per associare ai diversi stati uno stile diverso è necessario usare una pseudo classe.

Sintassi:
elemento:stato{dichiarazione}
a:visited{color:red;}

Proprietà Link

Link non ancora selezionato:
a:link{…;}

Passaggio mouse sul link(mouse over)
a:hover{..;}

Link selezionati
a:active{…;}

Link visitati:
a:visited{..;}