Con CSS se puede cambiar el comportamiento de las listas HTML para que muestren otra numeración, o un espacio de separación diferente.

Las listas también tienen sus propiedades específicas para alterar el estilo o las características propias de este tipo de elementos HTML. Por ejemplo, las siguientes propiedades:

Propiedad Valor Significado
list-style-image: none | url(image.png) Especifica una imagen para usar como «punto» o viñeta de ítem.
list-style-position: inside | outside Establece o elimina indentación de ítems sobre la lista.

La primera propiedad, list-style-image permite indicar la URL de una imagen para utilizar de icono o viñeta en cada ítem de la lista. Con el valor none eliminamos el uso de cualquier imagen.

Por otro lado, la propiedad list-style-position permite establece una indentación a todos los ítems de la lista, estableciendolos desplazados a la derecha (inside) o sin desplazar (outside).

La tercera propiedad, list-style-type nos permite indicar que tipo de numeración tendrán las listas (en el caso de no estar utilizando ningun imagen). Se establecen tres grupos. El primero indicado para las listas que no requieren orden, el segundo para las listas numeradas y el tercero para las listas numeradas que queremos especificar con letras (números romanos, letras griegas, etc...).

Veamos cada uno de los valores posibles:

Propiedad Valor Significado
list-style-type: disc | circle | square | none Viñetas sin orden
list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman Viñetas numéricas
list-style-type: lower-alpha | | upper-alpha | lower-greek Viñetas alfabéticas

El primer grupo, indicado para listas sin orden <ul>:

Si lo que queremos es establecer una lista numerada <ol>, podemos utilizar valores como:

Existen otros valores como bengali, cambodian, hebrew, devanagari, gujarati, gurmukhi, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, tamil, telugu. thai, tibetan, hiragana, hiragana-iroha, katakana, katakana-iroha, entre otros.

Atajo: Listas

Es posible utilizar la propiedad de atajo list-style para especificar varias propiedades en una sola. El orden aconsejado es el siguiente:

div {
    list-style: <type> <position> <image>
}

Por ejemplo:

div {
    list-style: circle inside none;
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).