Hay cuatro propiedades de estilo para listas.
| Elemento | Descripción |
|---|---|
list-style-type |
Indica cual es el símbolo que se utiliza como marcador en las listas. Valores que puede tomar son: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. |
list-style-image |
Permite utilizar el uso de una imagen como marcador en una lista. El valor que toma es la ruta del fichero imagen |
list-style-position |
Determinan la posición del marcador en una lista. Puede tomar los valores: outside o inside. |
list-style |
Permite establecer de una única vez todas las características de una lista. Hay que seguir el orden siguiente: list-style-type, list-style-position y list-style-image. |
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Estilo para listas</title>
<style>
#flecha{ list-style-image: url("flecha.png") }
.circ{ list-style-type: circle }
#armenio{ list-style-type: armenian }
</style>
</head>
<body>
<p >Lista con imagen</p>
<ul id="flecha">
<li>Patatas</li>
<li>Peras</li>
</ul>
<p >Lista con círculo</p>
<ul class="circ">
<li>Patatas</li>
<li>Peras</li>
</ul>
<p>Alfabeto armenio</p>
<ol id="armenio" reversed>
<li>Peras</li>
<li>Manzanas</li>
</ol>
</body>
</html>
Que en el navegador se ve del siguiente modo:
