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:

istruzione iniziale della lista
istruzione di inizio e termine dell'elemento della lista
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):

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)

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:

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.

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

• 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

• 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 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:

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 da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.