CSS: Listas (<li>, <ol> y <ul>)

Es muy fácil cambiar el aspecto de nuestras listas numeradas y con viñetas haciendo uso de nuestro buen amigo CSS. A continuación doy varios ejemplos de esto.

Sin estilos

Las siguientes son dos listas que no tienen definido ningún tipo de estilo, tal como las muestran los navegadores por defecto. Las primeras son numeradas, usando <ol>, y las segundas son listas con viñetas, usando <ul>:

<ol>   <li>Perro</li>   <li>Gato</li>   <li>Pato</li> </ol>

Perro Gato Pato

<ul> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>

Rojo Verde Lila

Tipo de Viñeta

Para cambiar el tipo de viñeta a mostrar (por defecto el círculo negro y los números decimales) se usa la propiedad list-style-type.
Sus valores posibles pueden ser de tres tipos: numéricos y alfabéticos (ambos para <ol>) ó gráficos (para <ul>):

valores numéricos	decimal | decimal-leading-zero | lower-roman | upper-roman | armenian | georgian
valores alfabéticos	lower-latin | upper-latin | lower-alpha | lower-greek
valores gráficos	circle | square | disc

 
Si no se desea usar ninguna viñeta, se debe emplear el valor none.
Los siguientes son ejemplos usando cada uno de ellos.

<ol style="list-style-type: decimal;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: decimal-leading-zero;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: lower-roman;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: upper-roman;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: armenian;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: georgian;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: lower-latin;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: upper-latin;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: lower-alpha;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ol style="list-style-type: lower-greek;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>	Perro Gato Pato
<ul style="list-style-type: disc;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>	Rojo Verde Lila
<ul style="list-style-type: square;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>	Rojo Verde Lila
<ul style="list-style-type: circle;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>	Rojo Verde Lila

Imágen de la Viñeta

Si las opciones anteriores no son suficientes, también se puede utilizar una imágen propia para usarla como viñeta.
Para ello se usa la propiedad list-style-image que usa el valor url.

<ul style="list-style-image:  url('http://3.bp.blogspot.com/s1600/rojo.gif');"> <li>Rojo</li> <li>Lila</li> </ul>

Rojo Lila

Valor inicial

Para el caso de las listas numeradas, podemos definir el valor incial. Es decir, no necesariamente tienen que partir con 1 o A.
Para ello usamos simplemente value en la etiqueta <li>, al cual le asignamos el valor de inicio.

<ol>   <li value="5">Perro</li>   <li>Gato</li>   <li value="15">Pato</li>   <li>Rana</li> </ol>

Perro Gato Pato Rana

---