A Sbafo! Tutto per il web gratis e in italiano...

 AVVISO

   Aggiungi ai preferiti  

:: Sei qui: Home > Manuali > Indice generale dei manuali - Giochiamo con i fogli di stile - pagina 16
:: Home

Grafica
:: Sfondi
:: Pulsanti
:: Linee
:: Gioielli
:: Puntini
:: Gif animate
:: Clipart
:: Icone
:: Set completi

Risorse
:: Caratteri
:: Applet e Javascript
:: Suoni
:: Programmi
:: Manuali

Servizi
:: Spazio web
:: Contatori di accessi
:: Libri degli ospiti
:: Crea i tuoi metatag

Richieste
:: Pulsanti
:: Assistenza
:: Scrivici

Varie
:: Dicono di noi
:: Note legali
 
Crea il tuo sito con noi...
In collaborazione
Testi e Manuali
Pubblicità
Pubblicità
Noi sosteniamo
C'E' BISOGNO ANCHE DI TE
 
Indice di questo manuale Indice di tutti i manuali Area download

Giochiamo con i fogli di stile

Versione 1.0

Manuale scritto da Seatiger Team™ nel mese di agosto 2002

A SBAFO! Tutto per il web gratis e in italiano...

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 9

Gli elenchi

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

 

9.1 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>

anteprima

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>

anteprima
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.
 

9.2 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>

anteprima
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")

 

9.3 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>

anteprima

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>

anteprima
 

 
Torna alla pagina precedente Vai alla pagina successiva
Pagina precedente Pagina successiva
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Registrazione dominio, spazio illimitato, 5 caselle di posta, a soli 24,79 euro all'anno iva inclusa.

www. .

Questo sito è ottimizzato per Explorer 5.0 o superiore, Java compatibile. Alcune delle applicazioni presenti potrebbero non essere supportate da Netscape© o da sistemi operativi diversi da Microsoft© Windows. Tutti i marchi citati sono di proprietà dei loro legittimi autori.

Webmaster: Seatiger Team