![]() |
||
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. <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:
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:
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:
Questo il risultato a sinistra con dir rtl:
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
Con lo stesso sistema si possono avere diversi simboli usando le seguenti parole chiave da assegnare alla proprietà list-style-type
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); }
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; }
ol { list-style-position: 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. |
![]() |