CSS: tipo de estilo de lista

Descripción

La propiedad list-style-type establece el estilo de conteo (o viñeta) utilizado en el marcador para un elemento de lista.

Valores posibles

Estos son los valores que se pueden usar para una lista desordenada:

No Señor.	Valor y descripción
1	none N / A
2	disc (default) Un círculo relleno
3	circle Un circulo vacio
4	square Un cuadrado relleno

Estos son los valores que se pueden usar para una lista ordenada:

Valor	Descripción	Ejemplo
decimal	Número	1,2,3,4,5
cero inicial decimal	0 antes del número	01, 02, 03, 04, 05
alfa inferior	Caracteres alfanuméricos en minúscula	a B C D e
alfa superior	Caracteres alfanuméricos en mayúscula	A B C D E
romano inferior	Números romanos en minúscula	yo, ii, iii, iv, v
romano superior	Números romanos en mayúsculas	I, II, III, IV, V
griego inferior	El marcador es griego inferior	alfa, beta, gamma
latín inferior	El marcador es latín inferior	a B C D e
latín alto	El marcador es latino superior	A B C D E
hebreo	El marcador es la numeración hebrea tradicional
armenio	El marcador es la numeración armenia tradicional
georgiano	El marcador es la numeración tradicional georgiana.
cjk-ideográfico	El marcador son números ideográficos simples
hiragana	El marcador es hiragana	a, yo, u, e, o, ka, ki
katakana	El marcador es katakana	A, I, U, E, O, KA, KI
hiragana-iroha	El marcador es hiragana-iroha	yo, ro, ja, ni, ho, él, a
katakana-iroha	El marcador es katakana-iroha	YO, RO, HA, NI, HO, HE, TO

Se aplica a

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

Sintaxis DOM

object.style.listStyleType = "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:

↰ Previous page