Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

Le Liste

Abbiamo visto nella lezione precedente, come inserire del testo e formattarlo a seconda delle proprie esigenze; un testo per˛ a volte necessita di elenchi o liste pi¨ o meno ordinate e xhtml, grazie ai css, offre diverse possibilitÓ per gestire e personalizzare queste liste, vediamone alcune, quelle maggiormente adoperate.

Tutte le liste possono essere nidificate fra loro, all'interno di queste liste ci sono tre elementi base:

<ol> o <ul> istruzione iniziale della lista
<li> </li> istruzione di inizio e termine dell'elemento interno della lista
</ol> o </ul> istruzione finale della lista


Prendiamo la nostra struttura html, quella usata nelle lezioni precedenti, ed inseriamo le istruzioni per definire una lista, in questo caso ordinata (ol = Ordered List):

<body>
<ol id="prova_lista" dir="ltr">
  <li>Descrizione prima voce della lista</li>
  <li>Descrizione seconda voce della lista</li>
  <li>Descrizione terza voce della lista</li>
  <li>Descrizione quarta voce della lista</li>
  <li>Descrizione quinta voce della lista</li>
</ol>
</body>

Questo il risultato:

  1. Descrizione prima voce della lista
  2. Descrizione seconda voce della lista
  3. Descrizione terza voce della lista
  4. Descrizione quarta voce della lista
  5. Descrizione quinta voce della lista

Le nostre frasi hanno adesso un numero progressivo inserito dalle istruzioni lista, notare l'attributo dir che serve per indicare la direzione: ltr (left to right) da sinistra a destra. La stessa lista con attributo rtl(right to left) da destra a sinistra:

  1. Descrizione prima voce della lista
  2. Descrizione seconda voce della lista
  3. Descrizione terza voce della lista
  4. Descrizione quarta voce della lista
  5. Descrizione quinta voce della lista

Vediamo anche come definire una lista non ordinata. (ul= Unordered List)

<body>
<ul id="prova_lista" dir="ltr">
  <li>Descrizione voce lista 1</li>
  <li>Descrizione voce lista 2</li>
  <li>Descrizione voce lista 3</li>
  <li>Descrizione voce lista 4</li>
  <li>Descrizione voce lista 5</li>
</ul>
</body>

Questo il risultato a destra con dir ltr:

  • Descrizione prima voce della lista
  • Descrizione seconda voce della lista
  • Descrizione terza voce della lista
  • Descrizione quarta voce della lista
  • Descrizione quinta voce della lista

Questo il risultato a sinistra con dir rtl:

  • Descrizione prima voce della lista
  • Descrizione seconda voce della lista
  • Descrizione terza voce della lista
  • Descrizione quarta voce della lista
  • Descrizione quinta voce della lista



E' possibile usare i css per controllare l'aspetto e la posizione dei contenuti della lista stessa. le proprietÓ: list-style-type, list-style-image, list-style-position e list-style servono proprio a questo, vediamo alcuni esempi:

Adoperiamo lo stesso foglio di stile usato in precedenza. Apriamolo con l'editor ed inseriamo al suo interno questo codice:

ol { list-style-type: square; }

Abbiamo definito come tipo di lista ordinata square che significa quadrato

  1. Descrizione prima voce della lista
  2. Descrizione seconda voce della lista
  3. Descrizione terza voce della lista

Con lo stesso sistema si possono avere diversi simboli usando le seguenti parole chiave da assegnare alla proprietÓ list-style-type

  1. Descrizione con square
  2. Descrizione con disc
  3. Descrizione con circle
  4. Descrizione con lower-roman
  5. Descrizione con upper-roman
  6. Descrizione con lower-alpha
  7. Descrizione con upper-alpha
  8. Descrizione con none

Da notare che il numero romano minuscolo riporta IV = 4 perchŔ Ŕ il quarto componente di quella lista, quello successivo infatti essendo il quinto (V) segue un incremento cronologico, stessa cosa vale per le lettere dell'alfabeto, la sesta voce corrisponde alla sesta lettera in ordine alfabetico e cioŔ la lettera f. upper e lower stanno ad indicare se usare lettere maiuscole o minuscole. none viene usato per nessun marcatore.



Vediamo la proprietÓ list-style-image che permette di usare una immagine grafica.

ol { list-style-image: url(file:nome_immagine.gif); }
  1. Descrizione 1 con immagine grafica
  2. Descrizione 2 con immagine grafica
  3. Descrizione 3 con immagine grafica
  4. Descrizione 4 con immagine grafica
  5. Descrizione 5 con immagine grafica

Dove Ŕ possibile dopo url(file: specificare un url valido che si trova in rete, una cartella del proprio spazio web o direttamente il nome dell'immagine da adoperare se questa si trova nella stessa cartella dove risiede la pagina web che la richiama.



Vediamo la proprietÓ list-style-position: che accetta due parametri: inside o outside

ol { list-style-position: inside; }
  • Descrizione testo nella lista non ordinata con parametro inside Descrizione testo nella lista non ordinata con parametro inside Descrizione testo nella lista non ordinata con parametro inside
  • Descrizione testo nella lista non ordinata con parametro inside Descrizione testo nella lista non ordinata con parametro inside Descrizione testo nella lista non ordinata con parametro inside
  • Descrizione testo nella lista non ordinata con parametro inside Descrizione testo nella lista non ordinata con parametro inside Descrizione testo nella lista non ordinata con parametro inside



ol { list-style-position: outside; }
  • Descrizione testo nella lista non ordinata con parametro outside Descrizione testo nella lista non ordinata con parametro outside Descrizione testo nella lista non ordinata con parametro outside
  • Descrizione testo nella lista non ordinata con parametro outside Descrizione testo nella lista non ordinata con parametro outside Descrizione testo nella lista non ordinata con parametro outside
  • Descrizione testo nella lista non ordinata con parametro outside Descrizione testo nella lista non ordinata con parametro outside Descrizione testo nella lista non ordinata con parametro outside

Notare la differenza che risulta evidente: nel caso di inside il marcatore di lista (il pallinio) si trova all'interno del testo che compone la lista stessa. Adoperando invece outside risulta all'esterno.



La proprietÓ list-style permette di attribuire contemporaneamente una o pi¨ proprietÓ direttamente, come in questo esempio:

ol { list-style: url(immagine.gif) square outside; }
ul { list-style: circle inside; }


Per questa lezione credo possa bastare... Avete imparato a creare una pagina web e ad introdurvi del testo usando all'occorrenza delle liste, nella prossima lezione vedremo come inserire le immagini.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi