CSS list-style-image – Grafik für Aufzählungen in Listen

Mit der CSS Eigenschaft list-style-image können kleine eigene Grafiken genutzt werden, um diese gegen die normalen Aufzählungspunkte/Zahlen auszutauschen.

Die Eigenschaft kann dem HTML Tag ul sowie ol zugewiesen werden. Die li Tags, die darin enthalten sind, erhalten dann diese Aufzählungsgrafik. Auch Elemente, die mittels display:list-item deklariert werden, können dann die Aufzählungsgrafik erhalten.

Beschreibung und Syntax zu CSS list-style-image

ul{
list-style-image: url('img/stylelist.png');
}

Erläuterung der Eigenschaften

Im Beispiel wurde das PNG-Bild im Ordnerpfad “img" mittels url() ausgewählt. Nur dies ist bei der Eigenschaft möglich.
Auch wurde hier die Gültigkeit auf alle ul (unsortierte Listen) gelegt. Wenn es hingegen nur für eine spezielle Liste gelten soll, benutz bitte eine ID oder CLASS, um dies nicht für alle Listen geltend zu machen.
Der HTML ol Tag hingegen steht für sortierte Listen, die normalerweise Nummeriert werden z.b. beginnend am 1. …

Informationen und Werte

Vererbbar: ja (auf dessen <li> Elemente)
Initialwert: none (normale Festlegung von Aufzählungspunkten (ul) oder Aufzählungsnummern (ol))
Werte: url() , none , inherit (vererbt)