CSS/Eigenschaften/list-style-type

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft list-style-type ermöglicht die Auswahl des Aufzählungszeichens bzw. die Festlegung der Art der Nummerierung.

erlaubte Werte
  • none = kein Bullet-Zeichen, keine Nummerierung

Bei ul-Listen:

  • disc = Dateisymbol als Bullet-Zeichen
  • circle = rundes Bullet-Zeichen
  • square = rechteckiges Bullet-Zeichen

Bei ol-Listen:

  • decimal = Nummerierung 1.,2.,3.,4. usw.
  • lower-roman = Nummerierung i.,ii.,iii.,iv. usw.
  • upper-roman = Nummerierung I.,II.,III.,IV. usw.
  • lower-alpha = Nummerierung a.,b.,c.,d. usw.
  • upper-alpha = Nummerierung A.,B.,C.,D. usw.

Mit CSS3 wurden eine Vielzahl neuer Aufzählungszeichen bzw. Nummerierungen definiert. Außerdem können durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; auch eigene Aufzählungszeichen festgelegt werden.

  • für ungeordnete Listen
    • box, Zeichen 25FD (◽)
    • check, Zeichen 2713 (✓)
    • diamond, Zeichen 25C6 (◆)
    • dash, Zeichen 2014 (—)
  • für geordnete Listen (Auswahl)
    • binary, Nummerierung als Binärzahlen 0, 1, 10, 11, 100, 101, …
    • lower-hexadecimal, Nummerierung als Hexadezimalzahlen, 0, 1, 2, … , 9, a, b, … , f, 10 …
    • upper-hexadecimal, Nummerierung als Hexadezimalzahlen, 0, 1, 2, … , 9, A, B, … , F, 10 …
    • super-decimal, Nummerierung in hochgestellten Dezimalzahlen
    • asterisks, Nummerierung mit Asterisks, *, **, ***, …
    • footnotes, Nummerierung als Fußnoten, Zeichen 2A, 2051, 2020, 2021 (*, ⁑, †, ‡)
    • lower-alpha-symbolic, a, b, c, …
    • upper-alpha-symbolic, A, B, C, …
    • simple-upper-roman, Nummerierung in römischen Zahlen im Bereich von 1 bis 3999, I, II, III, …
    • simple-lower-roman, Nummerierung in römischen Zahlen im Bereich von 1 bis 3999, i, ii, iii, …
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: abhängig von Schachtelungstiefe und Browser
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung ja
animierbar nein
Beispiel
ul { list-style-type: square; }
Auf Aufzählungszeichen wird ein Viereck verwendet.
Beachten Sie: Der Browsersupport kann noch sehr unterschiedlich sein.

Weblinks

Siehe auch