CSS list-style Eigenschaft
Diese Eigenschaft ist eine Kurzform für list-style-type, list-style-position und list-style-image. Mit Beispielen erklärt.
Die CSS-Eigenschaft list-style ist eine Kurzform, mit der Sie drei Listenpunkt-Eigenschaften in einer einzigen Deklaration festlegen können:
list-style-type— die Form des Markers oder der Zählerstil (disc,circle,square,decimal,lower-roman,none…).list-style-position— ob der Markeroutsideder Inhaltsbox steht (Standard) oderinsidedavon.list-style-image— ein Bild, das anstelle des typbasierten Markers verwendet wird.
Diese Seite behandelt die Kurzform-Syntax, wie die Werte den drei Langform-Eigenschaften zugeordnet werden, und die häufigsten Einsatzszenarien in der Praxis.
Wie die Kurzform funktioniert
Sie können die Werte in beliebiger Reihenfolge angeben, aber die übliche Reihenfolge ist type → position → image:
list-style: square inside url('marker.png');Es müssen nicht alle drei angegeben werden. Jede Langform-Eigenschaft, die weggelassen wird, wird auf ihren Initialwert zurückgesetzt — list-style: square schreiben ist also dasselbe wie list-style: square outside none. Dieser Reset ist der Grund, warum eine Kurzform eine zuvor gesetzte list-style-position unbemerkt aufheben kann. Bevorzugen Sie daher die Langform-Eigenschaften, wenn Sie nur eine davon ändern möchten.
Die Eigenschaft kann auf ein Listenelement oder auf die Liste selbst (<ul> oder <ol>) angewendet werden, wo sie an alle Elemente dieser Liste vererbt wird.
Wenn Sie sowohl einen list-style-type als auch ein list-style-image angeben, dient der Typ als Fallback: Das Bild wird angezeigt, wenn es geladen werden kann, und der Typ-Marker erscheint, wenn das Bild fehlt oder nicht geladen werden kann. Einen Typwert beizubehalten ist ein gutes Sicherheitsnetz.
Um Marker vollständig auszublenden, verwenden Sie list-style: none; — praktisch für Navigationsmenüs, die aus <ul>-Listen aufgebaut sind.
| Initialwert | disc outside none |
|---|---|
| Gilt für | Listenelemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.listStyle = "none"; |
Syntax
list-style: list-style-type list-style-position list-style-image | initial | inherit;Beispiel mit den Markern circle und square inside
<!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 zur Festlegung eines Markertyps (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 zur Festlegung der Markerposition (inside vs 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 mit einem Bild als Marker
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('/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 Listenpunkt-Markers zu definieren. Mehr dazu hier: CSS list-style-type Eigenschaft |
| list-style-position | Wird verwendet, um die Position des Listenpunkt-Markers festzulegen. Mehr dazu hier: CSS list-style-position Eigenschaft |
| list-style-image | Wird verwendet, um ein Bild anstelle eines Listenpunkt-Markers einzusetzen. Mehr dazu hier: CSS list-style-image Eigenschaft |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom Elternelement. |