CSS - list-style-type

Descrição

A propriedade list-style-type define o estilo de contagem (ou marcador) usado no marcador para um item da lista.

Valores possíveis

Aqui estão os valores que podem ser usados para uma lista não ordenada -

Sr. Não.	Valor e descrição
1	none N / D
2	disc (default) Um círculo preenchido
3	circle Um círculo vazio
4	square Um quadrado preenchido

Aqui estão os valores que podem ser usados para uma lista ordenada -

Valor	Descrição	Exemplo
decimal	Número	1,2,3,4,5
decimal à esquerda	0 antes do número	01, 02, 03, 04, 05
alfa inferior	Caracteres alfanuméricos minúsculos	a, b, c, d, e
alfa superior	Caracteres alfanuméricos maiúsculos	A, B, C, D, E
romano inferior	Números romanos minúsculos	i, ii, iii, iv, v
romano superior	Numerais romanos maiúsculos	I, II, III, IV, V
grego inferior	O marcador é grego inferior	alfa, beta, gama
latim inferior	O marcador é latim inferior	a, b, c, d, e
latim superior	O marcador é latim maiúsculo	A, B, C, D, E
hebraico	O marcador é uma numeração hebraica tradicional
armênio	O marcador é a numeração armênia tradicional
georgiano	O marcador é a numeração tradicional da Geórgia
cjk-ideográfico	O marcador são números ideográficos simples
hiragana	O marcador é hiragana	a, i, u, e, o, ka, ki
katakana	O marcador é katakana	A, I, U, E, O, KA, KI
hiragana-iroha	O marcador é hiragana-iroha	eu, ro, ha, ni, ho, ele, para
katakana-iroha	O marcador é katakana-iroha	I, RO, HA, NI, HO, HE, TO

Aplica-se a

Todos os elementos com uma exibição de item de lista.

Sintaxe DOM

object.style.listStyleType = "decimal"

Exemplo

Aqui está o exemplo -

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

Isso produzirá o seguinte resultado -

↰ Previous page