Propiedad list-style

DefiniciónEstablece algunas o todas las propiedades del marcador de los elementos de la lista
Valores
permitidos
Alguno o todos los siguientes valores y en cualquier orden:
Valor inicialCada propiedad define su propio valor por defecto
Se aplica aTodos los elementos de tipo elemento de lista
Válida enmedios visuales
Se heredasi
Definición en
el estándar
w3.org/TR/CSS21/generate.html#propdef-list-style

Ejemplos de uso

La propiedad list-style es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En concreto, list-style permite establecer simultáneamente las tres propiedades relacionadas con los marcadores de los elementos de una lista.

Como la mayoría de propiedades shorthand, es posible indicar alguno o todos los valores permitidos y en cualquier orden. De esta forma, todas las reglas CSS siguientes son correctas:

ul { list-style: square inside; }
ul { list-style: outside circle url("imagenes/cuadrado.png"); }
ul { list-style: disc url("imagenes/circulo.png"); }
ol { list-style: inside lower-roman; }
ol { list-style: upper-alpha outside; }

El uso de la propiedad list-style es muy común porque una de las buenas prácticas con los marcadores de las listas consiste en establecer de forma simultánea un marcador por defecto y un marcador propio:

ul li {
  list-style-type:  square;
  list-style-image: url("imagenes/imagen.png");
}

De esta forma, si en el ejemplo anterior el navegador puede descargar correctamente la imagen establecida mediante la propiedad list-style-image, los elementos de la lista muestran esa imagen como marcador. En cualquier otro caso, los elementos de la lista muestran el cuadrado establecido mediante la propiedad list-style-type.

Utilizando la propiedad list-style se puede escribir la regla CSS anterior de forma mucho más compacta:

ul li {
  list-style: square url("imagenes/imagen.png");
}

La propiedad list-style también se utiliza habitualmente cuando no se quiere mostrar ningún marcador en los elementos de una lista:

ul {
  list-style: none;
}

Por último, el estándar de CSS 2.1 recomienda establecer las propiedades de los marcadores directamente sobre las listas (etiquetas <ul> y <ol>) y no sobre los elementos individuales (etiqueta <li>).