CSS-Eigenschaft list-style

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>

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>

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>

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>

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.

Browser-Support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Finden Sie das nützlich?

Ähnliche Artikel