| Definición | Establece 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 inicial | Cada propiedad define su propio valor por defecto |
| Se aplica a | Todos los elementos de tipo elemento de lista |
| Válida en | medios visuales |
| Se hereda | si |
| 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>).