Asbafo
a- a+

Gli elenchi

 

Esistono pochi precisi elementi di stile per cambiareaspetto agli elenchi. Vediamoli in successione.
 

Aspetto del simbolo che precede le voci di un elenco

 
Per definire che aspetto debba avere il simbolo cheprecede le voci di un elenco si usa l'elemento distile list-style-type.
Premesso che il tag HTML che definisce l'elencopuntato è <ul> e quello che definiscel'elenco numerato è <ol>, i valoriammessi sono:
  • none (nessuno)
  • circle (cerchietto vuoto)
  • square (quadratino pieno)
  • decimal (numero)
  • lower-roman (numero romano in minuscolo)
  • upper-roman (numero romano in maiuscolo)
  • lower-alpha (lettera dell'alfabeto minuscola)
  • upper-alpha (lettera dell'alfabeto maiuscola)

Vediamo subito un esempio:

 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">     BODY { background:#FFFFD1; color:#000000; text-align:left;     margin-left : 250px; margin-right: 250px}     ol {list-style-type: upper-roman}     ul {list-style-type: circle}     </style>     </head>     <body>   <ol>  <li>Prima voce</li>  <li>Seconda voce</li>  <li>Terza voce</li>  </ol>  <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li>  </ul>     </body></html>
 
 
 
Vediamone un altro sulla base dello stesso schema:

Ecco l'esempio:

 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">     BODY { background:#FFFFD1; color:#000000; text-align:left;     margin-left : 250px; margin-right: 250px}     ol {list-style-type: upper-alpha}     ul {list-style-type: circle}     </style>     </head>     <body>   <ol>  <li>Prima voce</li>  <li>Seconda voce</li>  <li>Terza voce</li>  </ol>  <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li>  </ul>     </body></html>
 
 
 
Nota: negli elenchi numerati (tag <ol>) sonoammessi valori che danno come risultato un numero o unalettera dell'alfabeto, mentre negli elenchi puntati(tag <ul>) valori che danno come risultato unsimbolo.

 

Immagine che precede le voci di un elenco

 
Al posto del simbolo, si può anche usareun'immagine da fare apparire prima delle vocidell'elenco usando l'elemento di stilelist-style-image.

Utilizzeremo queste due immagini che sono custodite nella sottocartella img:

freccia.gif

puntino.gif (animata)

Il valore è espresso dalla stringa url ("percorso del file d'immagine")

Applichiamo il nuovo elemento di stile all'esempio precedente:

 

    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">     BODY { background:#FFFFD1; color:#000000; text-align:left;     margin-left : 250px; margin-right: 250px}     ol {list-style-image: url("img/freccia.gif")}     ul {list-style-image: url("img/puntino.gif")}     </style>     </head>     <body>   <ol>  <li>Prima voce</li>  <li>Seconda voce</li>  <li>Terza voce</li>  </ol>  <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li>  </ul>     </body></html>
 
 
 
Nota: Nell'esempio precedente sono state usate dueimmagini "freccia.gif" e"puntino.gif" che sono presenti nellasottocartella "img". Se le immagini fosserostate nella stessa cartella il valore dell'elementodi stile sarebbe stato url("freccia.gif"). Maè possibile collegare anche un'immaginepresente in un altro sito. In tal caso il valoredell'elemento di stile list-style-image sarebbepiù o meno in questa forma:

url("http://www.nomedominio.com/nomesito/nomecartella/freccia.gif")

 

Posizionamento delle voci di un elenco

 
Con l'uso dell'elemento di stilelist-style-position si può determinare ilposizionamento delle voci dell'elenco.

Valori ammessi sono:

  • inside (verso il centro dello schermo)
  • outside (verso il lato sinistro dello schermo)

Vediamo l'esempio, utilizzando sempre lo stesso schema:

 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">     BODY { background:#FFFFD1; color:#000000; text-align:left;     margin-left : 250px; margin-right: 250px}     ol {list-style-position : inside}     ul {list-style-position : outside}     </style>     </head>     <body>   <ol>  <li>Prima voce</li>  <li>Seconda voce</li>  <li>Terza voce</li>  </ol>  <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li>  </ul>     </body></html>
 
 

 

Come per tutti gli altri elementi di stile, anchequelli relativi agli elenchi si possono raggruppare inun unica stringa, con l'elemento piùgenerico list-style, come nell'esempio qui sotto:
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">     BODY { background:#FFFFD1; color:#000000; text-align:left;     margin-left : 250px; margin-right: 250px}     ol {list-style : lower-alpha outside}     ul {list-style: upper-roman inside}     </style>     </head>     <body>   <ol>  <li>Prima voce</li>  <li>Seconda voce</li>  <li>Terza voce</li>  </ol>  <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li>  </ul>     </body></html>



Ti potrebbe interessare anche

commenta la notizia