CSS - type de style de liste

La description

La propriété list-style-type définit le style de comptage (ou puce) utilisé dans le marqueur d'un élément de liste.

Valeurs possibles

Voici les valeurs qui peuvent être utilisées pour une liste non ordonnée -

N ° Sr. Valeur et description
1

none

N / A
2

disc (default)

Un cercle rempli
3

circle

Un cercle vide
4

square

Un carré rempli

Voici les valeurs qui peuvent être utilisées pour une liste ordonnée -

Valeur La description Exemple
décimal Nombre 1,2,3,4,5
zéro décimal 0 avant le nombre 01, 02, 03, 04, 05
alpha inférieur Caractères alphanumériques minuscules a, b, c, d, e
alpha supérieur Caractères alphanumériques majuscules A, B, C, D, E
bas-romain Chiffres romains minuscules i, ii, iii, iv, v
supérieur-romain Chiffres romains majuscules I, II, III, IV, V
bas-grec Le marqueur est le grec inférieur alpha, bêta, gamma
bas-latin Le marqueur est en bas-latin a, b, c, d, e
latin supérieur Le marqueur est en haut-latin A, B, C, D, E
hébreu Le marqueur est une numérotation hébraïque traditionnelle  
arménien Le marqueur est la numérotation arménienne traditionnelle  
géorgien Le marqueur est une numérotation géorgienne traditionnelle  
cjk-idéographique Le marqueur est constitué de nombres idéographiques simples  
Hiragana Le marqueur est hiragana a, i, u, e, o, ka, ki
Katakana Le marqueur est katakana A, I, U, E, O, KA, KI
Hiragana-iroha Le marqueur est hiragana-iroha je, ro, ha, ni, ho, il, à
katakana-iroha Le marqueur est katakana-iroha I, RO, HA, NI, HO, HE, TO

S'applique à

Tous les éléments avec un affichage d'élément de liste.

Syntaxe DOM

object.style.listStyleType = "decimal"

Exemple

Voici l'exemple -

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

Cela produira le résultat suivant -