Un altro tipo di liste che sicuramente fanno comodo nel redigere documenti riguardanti particolari argomenti sono le liste di definizioni. Queste liste, come avrete intuito, permettono di definire un glossario con la definizione dei termini usati nel nostro documento. Il tag che si usa per definire una lista di definizioni è <dl>…</dl> (Definition List). Il termine da definire viene racchiuso nel tag <dt>…</dt> (Definition Term) e la sua definizione viene racchiusa nel tag <dd>…</dd> (Definition Definition). Chiariamoci le idee con un esempio.
[code lang=”html”]
<dl>
<dt>Termine da definire</dt>
<dd>Definizione del termine adoperato</dd>
</dl>
[/code]
Ovviamente anche queste tipologia di liste possono essere controllate esteticamente dai fogli di stile; impareremo come adoperarle per creare un sistema che ci possa permettere di pubblicare delle news nelle nostre pagine. I possibili utilizzi alternativi sono pressoché infiniti, quindi potete sbizzarrirvi una volta imparata la tecnica.
[code lang=”html”]
<div id="news">
<dl class="news">
<dt>25 Aprile</dt>
<dd>Titolo – Descrizione</dd>
<dd>Lorem ipsum …</dd>
<dt>1 Maggio</dt>
<dd>Titolo – Descrizione</dd>
<dd>Lorem ipsum…</dd>
<dt>3 Maggio</dt>
<dd>Lorem ipsum…</dd>
</dl>
</div><!– end #news –>
[/code]
Mentre il codice CSS che può controllare il tutto è il seguente:
[code lang=”css”]
#news {
margin:0px auto;
width:95%;
display:block;
}
.news dt {
position: relative;
left: 0;
top: 1em;
width: 6em;
font-weight: bold;
padding:0 1em 0 0;
}
.news dd {
border-left: 1px solid silver;
margin: 0 0 0 7em;
padding: 0 0 .5em 1em;
}
[/code]
Il risultato è visionabile in questo esempio.
Le varianti per questa tecnica sono moltissime. Adesso spetta a voi il compito di crearne diverse e variabili.