Índice

Símbolos gráficos

Esta propiedad CSS permite reemplazar los marcadores por una imagen, lo que aporta un poco de variedad respecto a los marcadores tradicionales de HTML.

list-style-image:

url(marcador_personalizado.gif);

none;

Comentarios

  • El valor url(marcador_personalizado.gif) indica la ruta (URL) de la imagen que debe utilizarse como marcador. Es posible emplear una dirección relativa hacia una imagen alojada en la misma carpeta (como es el caso de nuestro ejemplo) o bien una dirección absoluta (con http://...).

  • Las imágenes pueden tener los formatos GIF, JPEG o PNG.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8">  
   <style type="text/css"> 
   ul { list-style-image: url(check.gif)} 
   </style> 
</head> 
<body> 
<ul> 
   <li>Elemento 1</li> 
   <li>Elemento 2</li> 
   <li>Elemento 3</li> 
   <li>Elemento 4</li> 
</ul> 
</body> 
</html>
images/CAP15IMG02.png

La imagen check.gif está disponible en el área de descargas.