Liste

List-style-image

Ecco come è possibile usare un'immagine come marcatore di un list item.

Codice:

ul.lista1 {
list-style-image : url(list.gif);
}

List-style-position:inside

Notate nell'esempio la posizione del testo.

Codice:

ul.lista2 li {
list-style-position : inside;
}

List-style-position:outside

Qui il comportamento è quello standard.

Codice:

ul.lista3 li {
list-style-position : outside;
}

List-style-type:disc

Codice:

ul.listadisc li {
list-style-type : disc;
color: red;
}

List-style-type:circle

Codice:

ul.listacircle li {
list-style-type : circle;
}

List-style-type:square

Codice:

ul.listasquare li {
list-style-type : square;
}

List-style-type:decimal su OL

Codice:

ol.listadecimal li {
list-style-type : circle;
}

  1. Item 1
  2. Item 2

List-style-type:decimal su UL

Codice:

ul.listadecimal li {
list-style-type : decimal;
}

List-style-type:lower-roman

Codice:

ol.listalower li {
list-style-type : lower-roman;
}

  1. Item 1
  2. Item 2
  3. Iten 3
  4. Item 4

List-style-type:lower-alpha

Codice:

ol.listaloweralpha li {
list-style-type : lower-alpha;
}

  1. Item 1
  2. Item 2

List-style-type:lower-latin

Per dimostrare che lower-alpha e lower-latin sono la stessa cosa. Su Explorer o Opera vedrete dei numeri ma è sbagliato, con Mozilla tutto va bene.

Codice:

ol.listalowerlatin li {
list-style-type : lower-latin;
}

  1. Item 1
  2. Item 2

List-style

Codice:

ul.lista4 li {
list-style : square inside;
}

List-style

Codice:

ul.lista5 li {
list-style : url(list.gif) outside;
}