Marcas de viñeta con imágenes

¡Aceptémoslo! Las marcas de viñeta predeterminadas en las listas son verdaderamente desagradables. ¿Por qué no utilizar una viñeta gráfica? Para esto, cree simplemente un estilo:

.liste {
  list-style-type: circle;
  list-style-image:url(dot.gif);
}

Este estilo contiene dos parámetros:

  • list-style-type: circle; determina el estilo de viñeta que aparecerá si el navegador no admite viñetas gráficas.

  • Puede reemplazar circle por otro estilo de viñeta: disc, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha o incluso none.

  • list-style-image:url(_/font/default.htm>dot.gif); determina la imagen que se utilizará como viñeta.

  • Reemplace dot.gif por el nombre de la imagen que desea utilizar. No olvide especificar el camino completo, si fuere necesario.

En el lugar en que desea crear su lista, no olvide recurrir al estilo liste ya definido:

<UL CLASS="liste">
<LI>First point
<LI>Second point
<LI>Third point
</UL>

Ejemplo:

  • First point
  • Second point
  • Third point