CSS-Eigenschaft list-style

❮ Vorige Nächste ❯

CSS-Eigenschaft list-style ist eine Shorthand-Eigenschaft, wodurch man alle list-style-Eigenschaften list-style (list-style-image, list-style-position, list-style-type) gleichzeitig einstellen kann.

Mit dieser Reihenfolge können Sie alle Eigenschaften einstellen: 1- list-style-type, 2- list-style-position, 3- list-style-image.

Die Eigenschaft list-style kann auf ein Listenelement oder auf die Liste der Elemente (<ul> oder <ol>) eingestellt werden, und dieser Stil wird kaskadiert und auf die Listenelemente in dieser Liste angewendet.

Wenn einer von den obigen Eigenschaften fehlt, wird sie automatisch auf den Standard gesetzt.

Anfangswert	disc outside none
Gilt für	Listenelemente
Geerbt	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

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example1{
      list-style: circle;
      }
      .example2{
      list-style: square inside;
      }
    </style>
  </head>
  <body>
    Liste 1
    <ul class="example1">
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
    Liste 2
    <ul class="example2">
      <li>Listenelement A</li>
      <li>Listenelement B</li>
      <li>Listenelement C</li>
    </ul>
  </body>
</html>

Versuch es selber!

Versuchen wir ein weiteres Beispiel, wo der Typ der Liste angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul:nth-of-type(1) {
      list-style: lower-greek;
      }
      ul:nth-of-type(2) {
      list-style: lower-latin;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style</h2>
    <ul>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
    </ul>
    <ul>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
    </ul>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo die Position der Liste angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .inside { 
      list-style: inside; 
      }
      .outside { 
      list-style: outside; 
      }
      li { 
      border: 1px solid #ccc; 
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style</h2>
    <h3>List-style ist "inside" positioniert:</h3>
    <ul class="inside">
      <li>Schokolade</li>
      <li>Kuchen</li>
      <li>Lollipops</li>
    </ul>
    <h3>List-style ist "outside" positioniert:</h3>
    <ul class="outside">
      <li>Kalte Getränke</li>
      <li>Heiße Getränke</li>
      <li>Eis</li>
    </ul>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo ein Bild als Listenstil definiert ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul {
      list-style: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style</h2>
    <ul>
      <li>Schokolade</li>
      <li>Kuchen</li>
      <li>Lollipops</li>
    </ul>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
list-style-type	Dient zur Definition des Typs der Listenpositionsmarke. Mehr dazu finden Sie hier: CSS-Eigenschaft list-style-type.
list-style-position	Es wird verwendet, um zu definieren, wo die Markierung des Listenelements platziert wird. Mehr dazu finden Sie hier: CSS-Eigenschaft list-style-position.
list-style-image	Wird verwendet, um ein Bild anstelle einer Markierung für Listenelemente zu platzieren. Mehr dazu finden Sie hier: CSS-Eigenschaft list-style-image.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.