In einigen Fällen müssen wir die Aufzählungszeichen ungeordneter und geordneter Listen entfernen. Das Entfernen der Listenaufzählungszeichen ist mithilfe von CSS keine komplexe Aufgabe. Dies kann einfach durch Festlegen des CSS erfolgen Listenstil oder Listenstiltyp Eigentum zu keiner .
Der Listenstiltyp Die CSS-Eigenschaft wird verwendet, um die Markierung (z. B. eine Disc, ein Zeichen oder den benutzerdefinierten Zählerstil) von a festzulegen Liste Artikelelement. Diese CSS-Eigenschaft hilft uns, die Liste ohne Aufzählungszeichen zu erstellen. Es kann nur auf die Elemente angewendet werden, deren Anzeigewert auf eingestellt ist Listenpunkt. Der Listenstiltyp Die Eigenschaft wird vererbt, sodass sie auf das übergeordnete Element angewendet werden kann (z. B oder
), damit es auf alle Listenelemente angewendet wird.
Standardmäßig sind die geordneten Listenelemente mit arabischen Ziffern (1, 2, 3 usw.) nummeriert und die Elemente in einer ungeordneten Liste sind mit runden Aufzählungszeichen (•) gekennzeichnet. Der Listenstiltyp Mit der CSS-Eigenschaft können wir den Standardlistentyp der Markierung in jeden anderen Typ ändern, z. B. Quadrat, Kreis, römische Ziffern, lateinische Buchstaben und viele mehr.
Wenn wir seinen Wert auf setzen keiner , werden die Markierungen/Aufzählungszeichen entfernt. Anstatt die Aufzählungszeichen in einer Liste zu entfernen, können wir sie durch die Bilder ersetzen. Dadurch wird die Website optisch attraktiver. Dies kann mithilfe der erfolgen Bild im Listenstil Eigentum.
Lassen Sie uns anhand eines Beispiels verstehen, wie Aufzählungspunkte entfernt werden.
Beispiel
In diesem Beispiel verwenden wir sowohl geordnete als auch ungeordnete Listen und wenden die an Listenstiltyp Eigenschaft mit dem Wert keiner um die Aufzählungspunkte der Listenelemente zu entfernen.
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> Testen Sie es jetzt Ausgabe
