Listas en CSS

Podemos especificar para listas as propiedades:

list-style-type – Tipo de lista. Acepta como valores disc (disco escuro), circle (disco claro), square (cadrado), decimal (números decimais) , lower-roman (números romanos en minúsculas), upper-romman (números romanos en maiúsculas), lower-alpha (letras en minúsculas), upper-alpha (letras en maiúsculas), none (ningunha).
list-style-image – Imaxe da lista. Debe de especificar url("imaxe"). Tódolos fillos dunha lista definida desta forma toman a mesma imaxe.
list-style-position – Acepta os valores inside (o texto da segunda e sucesivas liñas comezan a escribirse baixo o símbolo da lista) e outside (o texto da segunda e sucesivas liñas comeza a escribirse a altura do texto da primeira liña).

Exemplo de regras de estilo:

.listaImagen {
list-style-image: url("punto.jpg");
list-style-position: outside;
}
.listaNumerica{
list-style-type: decimal;
list-style-position: inside;
}
.listaAlfabetica{
list-style-type: upper-alpha;
list-style-position: inside;
}

Exemplo de código:

<ul class="listaImagen">
<li>Punto 1
<ul>
      <li>Punto 1.1</li>
      <li>Punto 1.2</li>
   </ul>
</li>
<li>Punto 2</li>
</ul>

<ol class="listaNumerica">
<li>Punto 1
   <ul class="listaAlfabetica">
      <li>Punto 1.1</li>
      <li>Punto 1.2
        <ul>
           <li class="listaImagen">Punto 1.2.1</li>
           <li class="listaImagen">Punto 1.2.2</li>
        </ul>
      </li>
   </ul>
</li>
<li>Punto 2</li>
</ol>

Visualización: (Pode verse diferente en distintos navegadores)

Punto 1
- Punto 1.1
- Punto 1.2
Punto 2

Punto 1
- Punto 1.1
- Punto 1.2
  - Punto 1.2.1
  - Punto 1.2.2
Punto 2

Seguinte