Saltar al contenido principal

Propiedades de lista

Hay cuatro propiedades de estilo para listas.

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 (relativa, absoluta o URL) del fichero imagen.

list-style-position​

Determinan la posición del marcador en una lista.

Puede tomar los valores:

  • outside
  • 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
  • list-style-image

A continuación, se muestra un ejemplo completo:

<!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>

En el navegador se visualiza del siguiente modo:

Probar en el navegador

Documento HTML