Heute ekläre ich euch, welche Eigenschaften es im CSS für Listen gibt und wie ihr sie anwenden könnt.

Neben den üblichen Eigenschaften für den Text in den Listenelementen, gibt es drei spezielle für die Form der Liste:

list-style-image

list-style-position

list-style-type

Das "list-style-image" legt fest, ob für die Aufzählungszeichen eine eigene Grafik verwendet wird oder nicht. Angewendet wird es auf die ul- und/oder ol-tags:

ul
{
list-style-image: url(deinbild.gif);
}

Zwischen url() wird dann einfach die URL zum gewünschten Bild angegeben (Wichtig: ohne http:// !).

Soll keine eigene Grafik verwendet werden, geben wir einfach den Wert "none" an:

ul
{
list-style-image: none;
}

Das "list-style-position" bestimmt die Listeneinrückung. Der Wert "inside" sorgt beispielsweise dafür, dass bei einer zweiten Zeile eines Listenelements, diese unter dem Listensymbol anfängt. Die Listensymbole werden also "eingerückt" und so stehen die erste und zweite Zeile nicht direkt untereinander, sondern leicht verschoben. Angewendet wird es ebenfalls auf das ul- und/oder ol-tag.

ul
{
list-style-position: inside;
}

Sollen sowohl die Listensymbole, wie gewohnt "ausgerückt" vor dem Listenelement stehen, so wird der Wert "outside" angegeben.

ul
{
list-style-position: outside;
}

Mit "list-style-type" können wir nun noch festlegen, wie unsere Listensymbole aussehen sollen, sofern wir keine eigene Grafik verwenden.

ul
{
list-style-type: circle;
}

Hier gibt es sehr viele Werte, die ihr einfach mal durch probieren könnt:

circle, square, disc, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, decimal-leading-zero, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha

Wenn ihr keines der Symbole verwenden wollt, gebt einfach den Wert "none" an.

ul
{
list-style-type: none;
}

Die Kurzform dieser drei Eigenschaften wird mit "list-type" angegeben. Die Werte werden in folgender Reihenfolge angegeben:

list-style-type -> list-style-image -> list-style-position

In einem Beispiel würde das also so aussehen:

ul
{
list-style: circle none outside;
}

Das wars auch schon!