CSS - estilo de lista

Descripción

La propiedad de estilo de lista es una propiedad abreviada que se utiliza para establecer la posición y el tipo de marcadores en una lista; también se puede utilizar para asignar una imagen como marcador.

Valores posibles

  • <list-style-type> - Cualquier valor permitido para la propiedad list-style-type.

  • <list-style-position> - Cualquier valor permitido para la propiedad list-style-position.

  • <list-style-image> - Cualquier valor permitido para la propiedad list-style-image.

Se aplica a

Todos los elementos con visualización de list-item.

Sintaxis DOM

object.style.listStyle = "decimal;"

Ejemplo

Aquí está el ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Esto producirá el siguiente resultado: