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 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):
<body>
<ol id="prova_lista" 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</body>
Questo il risultato:
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
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:
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
Vediamo anche come definire una lista non ordinata. (ul= Unordered List)
<body>
<ul id="prova_lista" dir="ltr">
Descrizione voce lista 1 Descrizione voce lista 2 Descrizione voce lista 3 Descrizione voce lista 4 Descrizione voce lista 5</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
Descrizione prima voce della lista
Descrizione seconda voce della lista
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
Descrizione con square
Descrizione con disc
Descrizione con circle
Descrizione con lower-roman
Descrizione con upper-roman
Descrizione con lower-alpha
Descrizione con upper-alpha
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); }
Descrizione 1 con immagine grafica
Descrizione 2 con immagine grafica
Descrizione 3 con immagine grafica
Descrizione 4 con immagine grafica
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 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.
