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:

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.