Propiedad list-style-type

Ejemplos de uso

La propiedad list-style-type establece el marcador que muestra cada elemento de las listas HTML. Por defecto, los navegadores muestran unos pequeños círculos rellenos para cada elemento de las listas no ordenadas <ul> y una numeración decimal para los elementos de las listas ordenadas <ol>:

La propiedad list-style-type permite modificar este comportamiento por defecto y elegir el marcador de los elementos de la lista entre los 14 valores disponibles. Los valores se clasifican en tres grupos según sus características: gráficos, numéricos y alfabéticos.

El primer grupo es el de los marcadores gráficos, que muestran pequeños dibujos o iconos en cada elemento de la lista: * disc: círculo relleno. * circle: círculo vacío. * square: cuadrado.

El aspecto gráfico de cada uno de estos marcadores depende del navegador. Por lo tanto, si visualizas esta página con diferentes navegadores, es posible que observes diferencias gráficas en las listas del siguiente ejemplo:

A continuación se muestra como ejemplo la regla CSS necesaria para mostrar los cuadrados como marcador de los elementos de la lista:

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

La principal limitación de los marcadores gráficos es que sólo se pueden utilizar los tres dibujos predefinidos y no se puede modificar ni su tamaño ni su color. De hecho, los marcadores gráficos siempre se muestran del mismo color y tamaño que el texto de cada elemento de la lista:

Si se quieren utilizar imágenes propias en los marcadores de una lista, se debe utilizar la propiedad list-style o list-style-image. No obstante, si no se puede visualizar la imagen establecida, siempre se muestra alguno de los marcadores predefinidos.

El segundo grupo de marcadores es el numérico, compuesto por los siguientes valores: * decimal: números decimales empezando por el número 1. * decimal-leading-zero: números decimales con tantos ceros a la izquierda como sean necesarios para que todos los números ocupen el mismo espacio (01, 02,, 03, ..., 98, 99). * lower-roman: números romanos en minúsculas (i, ii, iii, iv, ...) * upper-roman: números romanos en mayúsculas (I, II, III, IV, ...) * georgian: números georgianos. * armenian: números armenios.

A continuación se muestran ejemplos de todos los marcadores de tipo numérico:

A continuación se muestra como ejemplo la regla CSS necesaria para mostrar los números romanos en mayúscula como marcador de los elementos de la lista:

ol li {
  list-style-type: upper-roman;
}

El navegador Internet Explorer 7 y sus versiones anteriores no soportan los valores georgian y armenian y los sustituyen por los marcadores por defecto de las listas.

El último grupo de marcadores predefinidos es el de los marcadores alfabéticos:

• lower-latin y lower-alpha: letras minúsculas del alfabeto occidental (a, b, ... z, aa, ab, ..., az).
• upper-latin y upper-alpha: letras mayúsculas del alfabeto occidental (A, B, ... Z, AA, AB, ..., AZ).
• lower-greek: letras minúsculas del alfabeto griego.

A continuación se muestran ejemplos de todos los marcadores de tipo alfabético:

A continuación se muestra como ejemplo la regla CSS necesaria para mostrar las letras griegas como marcador de los elementos de la lista:

ol li {
  list-style-type: lower-greek;
}

Los marcadores de cualquier tipo se visualizan correctamente tanto en las listas ordenadas (<ol>) como en las listas no ordenadas (<ul>). No obstante, por la propia definición de cada tipo de lista, lo más correcto es utilizar marcadores gráficos sólo en las listas no ordenadas y los marcadores numéricos y alfabéticos sólo en las listas ordenadas.

Para no mostrar ningún marcador en una lista de elementos, se utiliza el valor none tanto en las listas ordenadas como en las no ordenadas:

Por último, los marcadores de las listas también forman parte de uno de los errores más conocidos y molestos del navegador Internet Explorer 7 y sus versiones anteriores. Si se posicionan de forma flotante los elementos de una lista mediante la propiedad float, los marcadores de los elementos desaparecen en los navegadores Internet Explorer 7 y versiones anteriores.

La lista del siguiente ejemplo utiliza el valor square como marcador de todos sus elementos. No obstante, como los elementos de la lista están posicionados de forma flotante, en el navegador Internet Explorer 7 no se visualizan los marcadores: