Asbafo
a- a+

Gli elenchi

 

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

Aspetto del simbolo che precede le voci di un elenco

 
Per definire che aspetto debba avere il simbolo che precede le voci di un elenco si usa l'elemento di stile list-style-type.
Premesso che il tag HTML che definisce l'elenco puntato è <ul> e quello che definisce l'elenco numerato è <ol>, i valori ammessi 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>) sono ammessi valori che danno come risultato un numero o una lettera dell'alfabeto, mentre negli elenchi puntati (tag <ul>) valori che danno come risultato un simbolo.

 

Immagine che precede le voci di un elenco

 
Al posto del simbolo, si può anche usare un'immagine da fare apparire prima delle voci dell'elenco usando l'elemento di stile list-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 due immagini "freccia.gif" e "puntino.gif" che sono presenti nella sottocartella "img". Se le immagini fossero state nella stessa cartella il valore dell'elemento di stile sarebbe stato url("freccia.gif"). Ma è possibile collegare anche un'immagine presente in un altro sito. In tal caso il valore dell'elemento di stile list-style-image sarebbe più 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 stile list-style-position si può determinare il posizionamento 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, anche quelli relativi agli elenchi si possono raggruppare in un 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

C'Ŕ 1 commento
Graziano
Hai qualche domanda da fare?