Eine Webseite kann man durch viele unterschiedliche Eingabebefehle steuern… ob Gradient, Overflow oder ähnliches. CSS List Style gehört dazu. Was genau das ist, welche Formen es gibt und wie Du es für Dich nutzen kannst, zeigen wir Dir jetzt.

CSS List Style kurz erklärt

CSS List Style ist ein Teil der CSS-Spezifikation, mit dem Du die Darstellung von Listen in HTML definieren kannst. Hierbei ist es egal, ob es sich um geordnete Listen (ol) oder um ungeordnete Listen (ul) handelt. Auf beide Listenarten hat der Eingabebefehl dieselben Auswirkungen.

Inwieweit kann man die jeweiligen Listen nun gestalten? Du kannst sie mit verschiedenen Eigenschaften wie zum Beispiel einer speziellen Schriftart, einer anderen Farbe oder einem Füllbild einrichten. Weiterhin kannst Du mithilfe von CSS List Style auch ein Zeichen oder ein Symbol an die entsprechenden Listenelemente anhängen.

Warum ist die Gestaltung von Aufzählungen und Co. überhaupt relevant? Wenn Du zum Beispiel per Laptop an Deiner Webseite arbeitest, kannst Du durch diesen Eingabebefehl ein Navigationsmenü optisch ansprechend gestalten. Auch Slideshows zu programmieren, ist damit möglich. Für ein responsives Webdesign kann CSS List Style essenziell sein.

Außerdem: Für diesen Eingabebefehl gibt es eine Shorthand: list-style. Alle im Folgenden aufgelisteten Variationen sind in dieser Shorthand enthalten.

Eigenschaften von CSS List Style

Es gibt eine Reihe von unterschiedlichen Eigenschaften, die Du mithilfe des CSS-Listenstils anwenden kannst. Darunter:

listen-style-type

Mit der Eigenschaft list-style-type kannst Du Zeichen, Symbole, Ziffern oder Buchstaben an die Listenelemente anhängen. Für geordnete Listen eignen sich hier eher Ziffern/Buchstaben, während Zeichen und Symbole für ungeordnete Aufzählungen gedacht sind. Einige Beispiele für mögliche Symbole in diesem Zusammenhang sind: Kreise, Quadrate, Diskette, Haken, Pfeile und Sterne.

Hier ist ein Beispiel für die Verwendung von list-style-type in CSS bei einer ungeordneten Liste:

ul { 
list-style-type: circle;
 } 

In diesem Beispiel definieren wir die Liste mit der list-style-type-Eigenschaft als „Kreis“. Das bedeutet, dass vor jedem Element in der Liste ein Kreiszeichen angezeigt wird.

list-style-position

Die Eigenschaft list-style-position verwendet man, um festzulegen, wo der Punkt einer Liste angezeigt wird. Es gibt zwei mögliche Werte: innen (inside) und außen (outside). Der Standardwert für diese Eigenschaft ist in der Regel außen, was bedeutet, dass der Punkt neben dem ersten Zeichen des Listenelements angezeigt wird.

Beispielsweise kannst Du die Listenstil-Position anwenden, um eine ungeordnete Liste wie folgt zu erstellen:

ul { 
list-style-position: outside;
 } 

Der Standardwert würde jedem Listenelement einen Punkt außen vor dem ersten Zeichen des Listenelements hinzufügen. Das sähe auf der Webseite wie folgt aus:

• 1. Punkt
• Punkt 2
• 3. Punkt

Wenn Du die Listenstil-Position auf innen festlegst, wird der Punkt innerhalb des Listenelements angezeigt, direkt vor dem ersten Zeichen:

Erster Punkt •
Zweiter Punkt •
Dritter Punkt •

Dies ist ein nützliches Tool, wenn Du Deine Liste auf eine einzigartige Weise hervorheben willst. Es kann auch verwendet werden, um die Lesbarkeit einer Liste zu verbessern.

Kleine abschließende Randnotiz: Innerhalb des Eingabebefehls list-style-position ist es außerdem möglich, Hintergründe (durch background) und Abstände (durch padding) sowie Richtungen (left, right, center) der Liste in Kombination festzulegen. Programmierst Du zum Beispiel, dass das Symbol links vom Text platziert wird, wird es auf Deiner Webseite auch auf der linken Seite des Textes angezeigt.

list-style-image

Ein Bild als Listensymbol kannst Du mit der Eigenschaft list-style-image auswählen. Wenn Du diese Eigenschaft vorher festlegst, musst Du den entsprechenden Pfad zu dem Bild angeben, welches Du als Listensymbol verwenden willst. Alternativ kannst Du auch ein Bild anstelle eines Symbols an die Listenelemente anhängen.

Hier ist ein einfaches Beispiel für eine ungeordnete Liste, die eine Sonne als Bild in der Liste zeigen würde:

ul { 
list-style-image: url("images/sun.png");
 }

Da diese Eigenschaft von Eltern- zu Kindelementen übernommen werden kann, kann sie vererbt werden.

list-style: none

Schließlich kannst Du auch eine benutzerdefinierte Liste erstellen, indem Du den list-style-type auf „none“ setzt. Dies bedeutet, dass kein Zeichen vor jedem Element in der Liste angezeigt wird. Bei einer ungeordneten Liste sähe das etwa so aus:

 ul { 
list-style-type: none;
 }

::marker

Abschließend: Die farbliche Gestaltung einer Liste im CSS kann man über die Art und Weise der Markierung (::marker) festlegen.

Wenn Du zum Beispiel eine Liste hast, kannst Du nach der Eingabe eines Listenpunktes diese Spezifikation hinzufügen und dann zum Beispiel die entsprechende Farbe eingeben. Soll ein Listenpunkt beispielsweise rot markiert werden, schreibst Du:

li::marker { 
color: red;
 }

Auf einen Blick

Zusammenfassend kann gesagt werden, dass CSS List Style eine sehr nützliche Funktion darstellt, um Listen in HTML anzupassen. Mit verschiedenen Eigenschaften – darunter listen-style-type, -postion, -image, listen-style: none sowie ::marker – kannst Du die Darstellung von (un-)geordneten Listen auf Deiner Webseite optisch anpassen und sie ansprechender gestalten. Das kannst Du zum Beispiel bei Navigationsfeldern oder Slideshows machen.

FAQ zu css list style