In sommige gevallen zijn we verplicht de opsommingstekens van ongeordende en geordende lijsten te verwijderen. Het verwijderen van de lijstopsommingstekens is geen complexe taak met behulp van CSS. Dit kan eenvoudig worden gedaan door de CSS in te stellen lijststijl of lijst-stijl-type eigendom aan geen .
De lijst-stijl-type De CSS-eigenschap wordt gebruikt om de markering (zoals een schijf, teken of de aangepaste tellerstijl) van a in te stellen lijst item-element. Deze CSS-eigenschap helpt ons de lijst zonder opsommingstekens te maken. Het kan alleen worden toegepast op de elementen waarvan de weergavewaarde is ingesteld lijst-item. De lijst-stijl-type eigenschap wordt overgenomen, zodat deze kan worden toegepast op het bovenliggende element (zoals of
) om het van toepassing te maken op alle lijstitems.
Standaard zijn de geordende lijstitems genummerd met Arabische cijfers (1, 2, 3, enz.) en zijn de items in een ongeordende lijst gemarkeerd met ronde opsommingstekens (•). De lijst-stijl-type Met de CSS-eigenschap kunnen we het standaardlijsttype markering wijzigen in elk ander type, zoals vierkant, cirkel, Romeinse cijfers, Latijnse letters en nog veel meer.
Als we de waarde ervan instellen op geen , het zal de markeringen/kogels verwijderen. In plaats van de opsommingstekens in een lijst te verwijderen, kunnen we ze vervangen door de afbeeldingen. Het maakt de site visueel aantrekkelijker. Het kan gedaan worden door gebruik te maken van de lijst-stijl-afbeelding eigendom.
Laten we begrijpen hoe u opsommingstekens kunt verwijderen door een voorbeeld te gebruiken.
Voorbeeld
In dit voorbeeld gebruiken we zowel geordende als ongeordende lijsten en passen we de lijst-stijl-type eigendom met de waarde geen om de opsommingstekens van de lijstitems te verwijderen.
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> Test het nu Uitvoer
