Con il css possiamo definire l'aspetto degli elementi che compongono le liste, ovvero i <li>, indipendentemente che esse siano liste <ol> (lista ordinata/numerata) o <ul> (lista non ordinata/punti).
<ol> <!--lista ordinata--> <li> Riga 1 </li> <li> Riga 2 </li> <li> Riga 3 </li> </ol> <ul> <!--lista non ordinata--> < li> Riga 1 </li> <li> Riga 2 </li> <li> Riga 3 </li> </ul>
Impostare un immagine come marcatore della nostra list-item
li {
list-style-image: url(image.jpg); }
Imposta la posizione del marcatore rispetto al testo del list-item
Valori possibili:
| outside | valore di default; il marcatore è collocato all’esterno del testo / il marcatore rimarrà sempre all'esterno |
| inside | il marcatore diventa parte integrante del testo / il marcatore apparirà all’interno del box |
li {
list-style-position: outside; }
Impostiamo l’aspetto del marcatore tra quelli disponibili in css
disc | cerchietto pieno colorato; il colore può essere modificato per tutti i tipi con la proprietà color |
circle | cerchietto vuoto |
square | quadratino |
decimal | conteggio decimale 1, 2, 3 ecc. |
decimal-leading-zero | conteggio decimale con preceduta da 0 (01, 02, 03 ecc.) |
lower-roman | cifre romane in minuscolo (i, ii, iii, iv ecc.) |
upper-roman | cifre romane in maiuscolo (I, II, III, IV ecc.) |
lower-alpha | lettere ASCII minuscole (a, b, c ecc.) |
upper-alpha | lettere ASCII maiuscole (A, B, C ecc.) |
lower-latin | simile a lower-alpha |
upper-latin | simile a upper-alpha |
lower-greek | lettere minuscole dell’alfabeto greco antico |
li {
list-style-type: square; }
SELETTORE { LIST-STYLE: TYPE POSITION; }
SELETTORE { LIST-STYLE: POSITION URL; }
li {
list-style: square outside; }
li {
list-style: outside url(image.jpg); }