Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile> Stilizzare le liste di definizione con i CSS


Stilizzare le liste di definizione con i CSS

Cosa sono le liste di definizione e come è possibile, grazie ai CSS2, stilizzarle e personalizzarle con poche e semplici operazioni.

A cura di: Fabio Regina | 1 settembre 2006


Prima di mostrarvi come le liste di definizione si prestino bene ad essere personalizzate con i fogli di stile, cercheremo di capire cosa sono e quando si utilizzano.

Le liste di definizione sono utilizzate per elencare una serie di elementi dei quali si dà una descrizione. Diciamo che il loro uso è simile a quello di un dizionario, ovvero: ogni termine ha una propria definizione.
Nel linguaggio XHTML la lista di definizione è realizzata con l'utilizzo dei seguenti tag:

  • <dl> (definition list) indica l'apertura della lista
  • <dt> (definition term) indica il termine da definire
  • <dd> (definition description) indica la definizione vera e propria del termine.

Ecco la sintassi corretta:

XHTML:

<dl>
<dt>termine da definire</dt>
<dd>definizione del termine</dd>
</dl>

Dal punto di vista semantico l'utilizzo più corretto che si può fare delle liste di definizione è l'associazione termine da definire e definizione del termine.
Il listato semplice, ovvero senza nessun foglio di stile associato, dà il seguente risultato.

Di seguito vengono forniti una serie di esempi in cui si utilizzano liste di definizione e il codice HTML utilizzato (identico per tutti gli esempi). Invece, il foglio di stile utilizzato per personalizzare le liste è riportato nella pagina relativa all'esempio.

Codice HTML:

<dl>		
 <dt>Accessibilit&agrave;</dt>			
  <dd>La capacit&agrave; dei...</dd>
 <dt>Usabilit&agrave;</dt>		
  <dd>Lo standard ISO 9241 ha...</dd>	
</dl>
  1. Lista di definizione con stile base
  2. Lista di definizione con immagine di sfondo
  3. Lista di definizione a tabella
  4. Lista di definizione stile vertical bar
  5. Lista di definizione stile galleria immagini
  6. Lista di definizione stile con angolo smussato

torna su

|

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]