Dans certains cas, nous sommes amenés à supprimer les puces des listes non ordonnées et ordonnées. La suppression des puces de liste n'est pas une tâche complexe utilisant CSS . Cela peut être facilement fait en définissant le CSS style de liste ou type de style de liste propriété à aucun .

Le type de style de liste La propriété CSS est utilisée pour définir le marqueur (comme un disque, un caractère ou le style de compteur personnalisé) d'un liste élément d'article. Cette propriété CSS nous aide à créer la liste sans puces. Il ne peut être appliqué qu'aux éléments dont la valeur d'affichage est définie sur élément de liste. Le type de style de liste La propriété est héritée, elle peut donc être appliquée à l'élément parent (comme

Par défaut, les éléments d'une liste ordonnée sont numérotés avec des chiffres arabes (1, 2, 3, etc.) et les éléments d'une liste non ordonnée sont marqués de puces rondes (•). Le type de style de liste La propriété CSS nous permet de changer le type de marqueur de liste par défaut en tout autre type tel que carré, cercle, chiffres romains, lettres latines et bien d'autres.

Si nous fixons sa valeur à aucun , cela supprimera les marqueurs/balles. Au lieu de supprimer les puces d’une liste, nous pouvons les remplacer par les images. Cela rend le site visuellement plus attrayant. Cela peut être fait en utilisant le image de style de liste propriété.

Voyons comment supprimer des puces à l'aide d'un exemple.

Exemple

Dans cet exemple, nous utilisons à la fois des listes ordonnées et non ordonnées et appliquons la type de style de liste propriété avec la valeur aucun pour supprimer les puces des éléments de la liste.

 ol { list-style-type: none; font-weight: bold; font-size: 20px; } ul { list-style-type: none; font-weight: bold; font-size: 20px; } <h2>Ordered list</h2> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol> <h2>Unordered list</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> 

Sortir