Imágenes como hitos de las listas

Cuando creamos una lista en HTML, por cada elemento de la lista, podemos detectar dos partes: la marca o hito que inicia el elemento y el texto del item de la lista. Gracias a CSS podemos conseguir que los hitos de las listas sean imágenes, incrementando así el número de iconografias ofrecidas por la especificación de HTML (circulo, cuadrado y elipse).

Para poner una imágen en el hito del item de la lista utilizaremos la propiedad list-item-image.

OL {
   list-style-image: url(miimagen.jgp);
}

El nombre del fichero que contiene la imágen deberá de especificarse mediante una URL: url (url_del_fichero). Donde la URL podrá ser relativa (../imagenes/documento.gif)) o absoluta (http://www.aulambra.com/imagenes/documento.gif).

Si utilizamos imágenes como hitos podemos tomar la precaución de espeficar un estilo sobre los items por si acaso el navegador no encuentra el fichero con la imágen. Los estilos los especificamos mediante la propiedad list-style-type.

OL {
   list-style-image: url(miimagen.jgp);
   list-style-type: square;
}

Usuarios que han visto este tema también han visto...

- Cómo usar distintos colores en un select menu con CSS?
- Cambiar la apariencia del cursor con CSS
- Botones de Formularios con CSS
- Página HMTL centrada horizontal y verticalmente con CSS
- Colores en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento