logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Le liste da inserire in una pagina Xhtml

Abbiamo visto nella lezione in cui abbiamo parlato del testo, come inserire del testo e formattarlo a nostro piacimento. Un testo però a volte ha bisogno di avere al suo interno degli elenchi o delle liste più o meno ordinate e Xhtml grazie alla versatilitÓ dei CSS, offre diverse possibilitÓ per gestire e personalizzare queste liste.

Piccola premessa da ricordare: le liste in Xhtml sono di due tipi: liste ordinate (<ol>) e non ordinate (<ul>) e i singoli elementi delle liste sono racchiusi dal tag <li>. Effettivamente è solo quest' ultimo elemento <li> che trova una rappresentazione effettiva sulla pagina che stiamo creando, mentre <ol> e <ul> sono semplici dichiarazioni del tipo di lista usato.

Per capire meglio cosa si intende per lista ordinata e non ordinata usiamo il nostro codice Xhtml, ed inseriamo le istruzioni per definire una lista, in questo caso ordinata (ol = Ordered List):

<html>
   <body>
     <ol>
        <li>Questa è la prima voce della lista</li>
        <li>Questa è la seconda voce della lista</li>
        <li>Questa è la terza voce della lista</li>
        <li>Questa è la quarta voce della lista</li>
        <li>Questa è la quinta voce della lista</li>
     </ol>
   </body>
</html>

Questo è il risultato finale della nostra lista ordinata.

  1. Questa è la prima voce della lista
  2. Questa è la seconda voce della lista
  3. Questa è la terza voce della lista
  4. Questa è la quarta voce della lista
  5. Questa è la quinta voce della lista

Vediamo adesso come possiamo definire una lista non ordinata. (ul= Unordered List):

<html>
   <body>
     <ul>
        <li>Descrizione della prima voce della lista</li>
        <li>Descrizione della seconda voce della lista</li>
        <li>Descrizione della terza voce della lista</li>
        <li>Descrizione della quarta voce della lista</li>
        <li>Descrizione della quinta voce della lista</li>
     </ul>
   </body>
</html>

Questo è il risultato finale della nostra lista non ordinata.

Sperando di avere chiarito le differenze tra liste ordinate e non, adesso analizziamo le proprietà dedicate alla formattazione di queste liste, che sono fondamentalmente quattro. Tre definiscono singoli aspetti, cioè list-style-image, list-style-position, list-style-type, mentre l'ultima, list-style, è una proprietà a sintassi abbreviata.


1- list-style-image: La proprietà list-style-image, definisce l'URL cioè l'indirizzo di un'immagine da usare come marcatore in una lista. L'immagine chiaramenta deve essere sempre adeguata alle dimensioni del testo. Più correttamente e per un fatto di rigore strutturale (lo stile si applica ai list-item), è preferibile, usando <ul> o <ol>, affidarsi ad un selettore del discendente (descendant selector) come da esempio:

   ul li { list-style-image: url (img/aquilone.gif) }

Questa soluzione è ottimale se prevediamo di usare sempre uno stesso stile per tutte le liste, ma se invece pensiamo di usare stili diversi, ci affidiamo alla potenza delle classi, che applicheremo di volta in volta a secondo delle nostre necessità. La sintassi consigliata è questa:

   ul lista3 li { list-style-image: url (img/albero_autunnale.gif) }

I valori che possiamo inserire per questa proprietà sono:


2- list-style-position: Con questa proprietà, impostiamo la posizione del marcatore rispetto al testo della lista

   #lista li { list-style-position: inside; }

I valori che possiamo inserire per questa proprietà sono:


3- list-style-type: Con questa proprietà invece definiamo l'aspetto che deve assumere il marcatore della lista., e a questo proposito la scelta è dei valori da usare è lunghissima, ma ci limiteremo a citare solo quelli più comuni e più usati nel linguaggio Xhtml e nei CSS.

   #lista_num { list-style-type: circle; }

I valori da usare sono:


4- list-style: Con la proprietà a sintassi abbreviata list-style, si definiscono tutti gli aspetti e gli stili di una li (list item). I valori sono quelli che abbiamo visto in precedenza.

      ul li { list-style: square inside; }
      ul lista2 li { list-style: outside url ( immagine2.gif); }

Per tutte le proprietà che abbiamo visto finora, guardiamo il codice con i relativi esempi, in questa pagina

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice