CSS list-style Property

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>

Probier es selbst »

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>

Probier es selbst »

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>

Probier es selbst »

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('/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>

Probier es selbst »

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?