La liste en CSS détermine la façon dont le contenu ou les éléments sont répertoriés d'une certaine manière, c'est-à-dire qu'ils peuvent être organisés de manière ordonnée ou aléatoire, ce qui facilite la création d'une page Web propre. Parce qu’ils sont adaptables et simples à manipuler, ils peuvent être utilisés pour organiser de grandes quantités de matériel. Le style par défaut de la liste est sans bordure. La liste peut être divisée en deux catégories :

Liste non ordonnée:Par défaut, les éléments des listes non ordonnées sont désignés par des puces, qui sont de minuscules cercles noirs.Liste ordonnée :Les éléments de liste dans les listes ordonnées sont identifiés par des chiffres et des lettres.

Les propriétés de liste CSS suivantes sont disponibles pour être utilisées dans le contrôle des listes CSS :

Type de style de liste :Cette propriété est utilisée pour déterminer l'apparence du marqueur d'élément de liste, tel qu'un style de disque, de caractère ou de compteur personnalisé.Image de style liste :Les images qui serviront de marqueurs d'éléments de liste peuvent être spécifiées à l'aide de ce paramètre.Position de style de liste :Il décrit l'emplacement de la zone de marquage par rapport à la zone de bloc principale.Style de liste :Le style de liste est configuré avec cet attribut.

Nous allons maintenant en apprendre davantage sur ces caractéristiques à travers des exemples.

Propriété de type style-liste

Le type de marqueur de liste par défaut peut être remplacé par divers autres types, notamment le carré, le cercle, les chiffres romains, les lettres latines et bien d'autres. Les entrées d'une liste non ordonnée sont désignées par des puces rondes (•), tandis que les éléments d'une liste ordonnée sont numérotés par défaut en chiffres arabes (1, 2, 3, etc.).

Les marquages ​​ou les puces seront supprimés si nous définissons leur valeur sur aucun.

Syntaxe:

type de style de liste : valeur ;

utilisations du système d'exploitation

Nous pouvons utiliser la valeur comme suit :

1. cercle
2. décimal, par exemple : 1,2,3, etc.
3. zéros décimaux, par exemple : 01,02,03,04, etc.
4. bas-romain
5. haut-romain
6. alpha inférieur, par exemple a, b, c, etc.
7. alphabétique supérieure, par exemple A, B, C, etc.
8. carré

Remarque : Le remplissage et la marge par défaut sont également inclus dans la liste. Il faut ajouter padding:0 et margin:0 au

et
balises pour éliminer cela.

Exemple

Cet exemple montre une liste CSS avec plusieurs types et valeurs de style de liste définis sur carré, alpha supérieur et plusieurs.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

Sortir