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.

Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Los símbolos de las listas
Siguiente
Posición del símbolo