| Definición | Establece la imagen que hace de marcador de los elementos de la lista |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | none |
| 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-image |
Ejemplos de uso
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>. Utilizando la propiedad list-style-type es posible seleccionar otros marcadores entre una serie de marcadores predefinidos.
La mayor limitación de la propiedad list-style-type es que sólo se pueden elegir los marcadores entre 14 valores predefinidos. De ellos, sólo tres marcadores son de tipo gráfico, lo que limita el diseño gráfico de las listas de elementos.
Afortunadamente, la propiedad list-style-type permite mostrar cualquier imagen como marcador de los elementos de cualquier lista. Para ello, sólo es necesario indicar la URL de la imagen que se quiere mostrar.
El siguiente ejemplo muestra tres listas de elementos con marcadores gráficos personalizados:
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Nullam quis felis
- Aliquam erat volutpat
- Aenean non mauris
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Nullam quis felis
- Aliquam erat volutpat
- Aenean non mauris
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Nullam quis felis
- Aliquam erat volutpat
- Aenean non mauris
A continuación se muestra el código CSS del ejemplo anterior:
ul#primera li {
list-style-image: url("imagenes/circulo_verde.png");
}
ul#segunda li {
list-style-image: url("imagenes/flecha_gris.png");
}
ul#tercera li {
list-style-image: url("imagenes/estrella.png");
}La imagen utilizada como marcador puede ser de cualquier formato reconocido por los navegadores (normalmente jpeg, gif o png) y puede ser de cualquier tamaño. No obstante, si se utiliza una imagen muy grande, los elementos de la lista se muestran demasiado separados entre sí.
Por otra parte, la principal limitación de la propiedad list-style-image es que no se puede modificar la posición en la que se muestra la imagen del marcador. Además, tampoco se pueden indicar de forma global diferentes imágenes para cada elemento de la lista, por lo que normalmente no se utiliza en las listas ordenadas <ol>.
Si se utilizan de forma simultánea las propiedades list-style-type y list-style-image, esta última tiene prioridad. Si se considera el siguiente ejemplo:
ul li {
list-style-type: square;
list-style-image: url("imagenes/imagen.png");
}En el ejemplo anterior, si el navegador puede descargar correctamente la imagen indicada, 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.
Emplear simultáneamente las propiedades list-style-type y list-style-image no sólo no es redundante, sino que es una buena práctica que protege el diseño de la página frente a los innumerables errores que pueden provocar que la imagen del marcador no se pueda descargar.