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
Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara startenCSS 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.