Liste CSS
Piccola premessa, le liste in HTML sono di due tipi ordinate (tag <ol>) e non ordinate (tag <ul>), i singoli elementi delle liste sono racchiusi dal tag <li>.
Le proprietà per formattare le liste con i CSS sono:
- List-style-image
- List-style-position
- List-style-type
- List-style
list-style-image
li { list-style-image: url(li.gif);} |
|
List-style-image inserisce un immagine come marcatore della lista. L'URL dell'immagine va indicato tra parentesi, all'interno di: url(indirizzo_immagine).
list-style-position
List-style-position imposta la posizione del marcatore rispetto alla lista. Accetta i valori:
- outside
- inside
li { list-style-position: inside;} |
|
li { list-style-position: outside;} |
|
list-style-type
List-style-type imposta l'aspetto del marcatore. Accetta i valori:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- lower-latin
- upper-latin
- lower-greek
li { list-style-type: disc;} |
|
li { list-style-position: circle;} |
|
li { list-style-type: square;} |
|
li { list-style-position: decimal;} |
|
li { list-style-type: decimal-leading-zero;} |
|
li { list-style-position: lower-roman;} |
|
li { list-style-type: lower-alpha;} |
|
li { list-style-position: upper-alpha;} |
|
li { list-style-type: lower-latin;} |
|
li { list-style-position: upper-latin;} |
|
li { list-style-type: lower-greek;} |
|
list-style
La proprietà list-style può contenere tutti i valori per le liste visti sopra. Ad esempio:
li { list-style: url(li.gif) outside;} |
|