Home -> Manuali e Tutorials -> Guida CSS -> CSS List  

Scarica il tutorial      |    Stampa il tutorial      |    Cerca nel sito      

Per definire che aspetto debba avere il simbolo che precede le voci di un elenco si usa l'elemento di stile list-style-type.
Premesso che il tag HTML che definisce l'elenco puntato è <ul> e quello che definisce l'elenco numerato è <ol>, i valori ammessi sono:

• none (nessuno)
• circle (cerchietto vuoto)
• square (quadratino pieno)
• decimal (numero)
• lower-roman (numero romano in minuscolo)
• upper-roman (numero romano in maiuscolo)
• lower-alpha (lettera dell'alfabeto minuscola)
• upper-alpha (lettera dell'alfabeto maiuscola)

Rimandiamo alla sezione dedicata all'html per tali esempi.

Immagine che precede le voci di un elenco

Al posto del simbolo, si può anche usare un'immagine da fare apparire prima delle voci dell'elenco usando l'elemento di stile list-style-image.
Ecco un esempio:

1.   Prima voce
2.   Seconda voce
3.   Terza voce

•   Prima voce
•   Seconda voce
•   Terza voce

Ecco altri esempi, in cui vengono usati le caratteristiche di stile dei margini e del riempimento:

• Prima voce
• Seconda voce
• Terza voce
• Quarta voce

• Prima voce
• Seconda voce

Qui sotto è mostrato uno schema che può aiutare a capire l'ultimo esempio:

Il codice dell'ultimo esempio è:

Torna su      |    Indice Guida      |    Pagina << 19 >>