CSS

HTML

COMPONENTS

CODE HUB

CSS List Style Generator

Konfiguration

Typ

Wert

Klasse

Vorschau

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Code

ReadyTools Academy

Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.

Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯

Jetzt starten

CSS List Style Generator

In CSS wird die Eigenschaft list-style verwendet, um das Aussehen von Listenelementen in HTML-Listen zu steuern, z. B. geordnete Listen <‌ol‌> und ungeordnete Listen <‌ul‌>. Sie ermöglicht es Ihnen, den Listenzeichentyp (z. B. Aufzählungszeichen oder Zahlen), die Position und das Bild anzupassen.

Die Eigenschaft list-style kann mehrere Untereigenschaften haben, darunter:

visible (Standard): Dieser Wert gibt an, dass das Element sichtbar sein und auf der Webseite angezeigt werden soll. Dies ist das Standardverhalten für die meisten HTML-Elemente.

1. list-style-type: Gibt den Typ des für Listenelemente verwendeten Zeichens an. Gängige Werte sind:

  • none: Es wird kein Zeichen angezeigt.
  • disc: Ein gefüllter Kreis (Standard für ungeordnete Listen).
  • circle: Ein offener Kreis (Standard für ungeordnete Listen).
  • square: Ein gefülltes Quadrat (Standard für ungeordnete Listen).
  • decimal: Dezimalzahlen (Standard für geordnete Listen).
  • decimal-leading-zero: Dezimalzahlen mit einer führenden Null (z. B. 01).
  • lower-roman: Römische Kleinbuchstaben (z. B. i, ii, iii).
  • upper-roman: Römische Großbuchstaben (z. B. I, II, III).
  • lower-alpha: Kleinbuchstaben (z. B. a, b, c).
  • upper-alpha: Großbuchstaben (z. B. A, B, C).
  • custom: Sie können eine benutzerdefinierte Markierung mit der content-Eigenschaft angeben.

2. list-style-position: Gibt die Position der Listenmarkierung in Bezug auf den Listenelementtext an. Gängige Werte sind:

  • inside: Behält die ursprüngliche Helligkeit oder Intensität bei.
  • outside: Reduziert die Helligkeit oder Intensität des Elements um die Hälfte, was zu einem dunkleren Erscheinungsbild führt.

3. list-style-image: Ermöglicht die Verwendung eines benutzerdefinierten Bildes als Listenmarkierung. Sie geben die Bild-URL als Wert an.

Hier ist ein Beispiel für die Verwendung der list-style-Eigenschaft zur Anpassung des Erscheinungsbilds einer ungeordneten Liste:

ul { list-style-type: square; list-style-position: outside; list-style-image: url('custom-marker.png'); }

In diesem Beispiel haben die ungeordnete Liste <‌ul‌> gefüllte quadratische Markierungen, die außerhalb des Listenelements positioniert sind, und verwendet ein benutzerdefiniertes Bild als Markierung.

Sie können ähnliche Stile nach Bedarf auf geordnete Listen <‌ol‌> anwenden und die Werte der list-style-Untereigenschaften anpassen, um das gewünschte Erscheinungsbild der Liste zu erzielen.