CSS list-style-Eigenschaft
Die CSS list-style-Eigenschaft ist eine Kurzschreibweise (Shorthand) für die folgenden list-style-Eigenschaften:
Sie können alle Eigenschaften in dieser Reihenfolge festlegen: 1. list-style-type, 2. list-style-position, 3. list-style-image.
Die list-style-Eigenschaft kann auf ein Listenelement oder auf die Liste der Elemente (<ul> oder <ol>) festgelegt werden, und dieser Stil wird vererbt (kaskadiert) und auf die Listenelemente in dieser Liste angewendet.
INFO
Fehlt eine der oben genannten Eigenschaften, wird sie automatisch auf den Standardwert gesetzt.
| Anfangswert | disc outside none |
|---|---|
| Anwendbar auf | Listenelemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.listStyle = "none"; |
Syntax
Syntax der CSS list-style-Eigenschaft
list-style: list-style-type list-style-position list-style-image | initial | inherit;Beispiel für die list-style-Eigenschaft:
Beispiel der CSS list-style-Eigenschaft mit den Werten square inside und circle
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
list-style: circle;
}
.example2 {
list-style: square inside;
}
</style>
</head>
<body>
List 1
<ul class="example1">
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
List 2
<ul class="example2">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
</body>
</html>Ergebnis
Beispiel für die list-style-Eigenschaft, bei der der Listentyp angegeben ist:
Beispiel der CSS list-style-Eigenschaft mit den Werten lower-greek und lower-latin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul:nth-of-type(1) {
list-style: lower-greek;
}
ul:nth-of-type(2) {
list-style: lower-latin;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>Beispiel für die list-style-Eigenschaft, bei der die Position der Liste angegeben ist:
Beispiel der CSS list-style-Eigenschaft mit den Werten inside und outside
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style: inside;
}
.outside {
list-style: outside;
}
li {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<h3>List-style is positioned "inside":</h3>
<ul class="inside">
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
<h3>List-style is positioned "outside":</h3>
<ul class="outside">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>Beispiel für die list-style-Eigenschaft, bei der ein Bild als Listenelement-Stil festgelegt ist:
Beispiel der CSS list-style-Eigenschaft mit dem Wert list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('https://de.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| list-style-type | Wird verwendet, um den Typ des Listenelement-Markers zu definieren. Mehr dazu hier: CSS list-style-type-Eigenschaft |
| list-style-position | Wird verwendet, um festzulegen, wo der Listenelement-Marker platziert wird. Mehr dazu hier: CSS list-style-position-Eigenschaft |
| list-style-image | Wird verwendet, um ein Bild anstelle eines Listenelement-Markers zu platzieren. Mehr dazu hier: CSS list-style-image-Eigenschaft |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Übung
Welche Typen der list-style CSS-Eigenschaft gibt es?