Stil der Listenelementmarkierung: Die Eigenschaft list-style-type

Die Eigenschaft list-style-type gibt das Erscheinungsbild der Listenelementmarkierung geordneter und ungeordneter Listen an beziehungsweise die Art der Nummerierung geordneter Listen.

Beim Wert none wird keine Listenelementmarkierung angezeigt.

Die Werte disc, circle und square bestimmen die Art der Listenelementmarkierung bei ungeordneten Listen. Die Darstellung ist browserabhängig, allerdings wird disc im Allgemeinen als gefüllter Kreis, circle als leerer Kreis und square als gefülltes Rechteck interpretiert. Die Farbe der Listenelementmarkierung entspricht der Schriftfarbe.

Die folgenden Werte sollten nur bei geordneten Listen verwendet werden. Viele dieser Werte werden nicht von allen Browsern interpretiert. Die Ausrichtung der Listenelementmarkierungen ist browserabhängig.

• decimal: Dezimale Nummerierung.
• decimal-leading-zero: Dezimale Nummerierung mit führender Null, das heißt, den Ziffern 1 bis 9 wird eine Null vorangestellt (01, 02, ..., 09, 10, 11, ...).
• lower-roman: Nummerierung in römischen Kleinbuchstaben.
• upper-roman: Nummerierung in römischen Großbuchstaben.
• hebrew: Nummerierung mit traditionellen hebräischen Buchstaben.
• georgian: Nummerierung mit traditionellen georgischen Buchstaben.
• armenian: Nummerierung mit traditionellen armenischen Buchstaben.
• cjk-ideographic: Nummerierung mit ideografischen Zeichen.
• hiragana, katakana, hiragana-iroha und katakana-iroha: Nummerierungen mit japanischen Glyphen.
• lower-latin oder lower-alpha: Nummerierung in kleinen ASCII-Buchstaben.
• upper-latin oder upper-alpha: Nummerierung in großen ASCII-Buchstaben.
• lower-greek: Nummerierung in griechischen Kleinbuchstaben.

Es ist in CSS nicht geregelt, wie bei alphabetischer Nummerierung nach Ende des Buchstabenvorrats des Alphabets, zum Beispiel bei lower-latin nach 26 Listenpunkten, weiternummeriert werden soll. Viele Browser gehen im Allgemeinen so vor, dass sie analog zu Zahlensystemen eine weitere »Ziffer« anfügen und hochzählen, beispielsweise bei lower-latin: a, b, ..., y, z, aa, ab, ..., ay, az, ba, bb, ...

Zum Seitenanfang

Grafiken als Listenelementmarkierung: Die Eigenschaft list-style-image

Die Eigenschaft list-style-image ermöglicht es, eine Grafik festzulegen, die anstelle der gewöhnlichen Listenelementmarkierung angezeigt wird.

Die Schreibweise des Werts <URI> entspricht der bei Einbindung eines Hintergrundbilds über die Eigenschaft background-image.

Im Allgemeinen wird das Bild nicht exakt mittig vor das Listenelement gesetzt, sondern nach oben ausgerichtet. Dadurch wirkt die Listenelementmarkierung verschoben, was Sie ausgleichen könnten, indem Sie die Grafik so erstellen, dass sie über einen gewissen Abstand nach oben verfügt. Vielen Webautoren ist dies zu umständlich, sodass sie auf die Eigenschaft list-style-image verzichten und eine Listenelementmarkierung stattdessen über ein Hintergrundbild nachstellen, dessen (vertikale) Position sich im Gegensatz zu der Position von Listenelementmarkierungen kontrollieren lässt.

Zum Seitenanfang

Position der Listenelementmarkierung: Die Eigenschaft list-style-position

Die Eigenschaft list-style-position gibt die Position der Listenelementmarkierung an.

Die Listenelementmarkierung kann entweder außerhalb (outside) oder innerhalb (inside) der Listenelementbox liegen.

Zum Seitenanfang

Listenelementmarkierungen: Die zusammenfassende Eigenschaft list-style

Die Eigenschaft list-style fasst die Einstellungen der einzelnen Listeneigenschaften (list-style-type, list-style-image, list-style-position) zusammen. Sie setzt zunächst die einzelnen Eigenschaften auf ihre Initialwerte und weist ihnen dann die explizit in der Deklaration angegebenen Werte zu.

Die Regel

ol.inhaltsverzeichnis {
  list-style-type: decimal-leading-zero;
  list-style-position: inside;
}

können Sie auch wie folgt schreiben:

ol.inhaltsverzeichnis {
  list-style: decimal-leading-zero inside;
}