CSS/Eigenschaften/Listenformatierung/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.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>list-style-type</title> <style>
        ul.first  {list-style-type: disc;}
        ul.second {list-style-type: circle;}
        ol.first  {list-style-type: decimal;}
        ol.second {list-style-type: lower-roman;}
</style> </head> <body> <h1>Demonstration verschiedener Aufzählungen</h1> <h2>Aufzählungsliste <code>ul</code> mit Darstellungstyp <code>disc</code></h2> <ul class="first"> <li>Probieren geht über Studieren</li> </ul> <h2>Aufzählungsliste <code>ul</code> mit Darstellungstyp <code>circle</code></h2> <ul class="second"> <li>Probieren geht über Studieren</li> </ul> <h2>Nummerierte Liste <code>ol</code> mit Darstellungstyp <code>decimal</code></h2> <ol class="first"> <li>Probieren geht über Studieren</li> </ol> <h2>Nummerierte Liste <code>ol</code> mit Darstellungstyp <code>lower-roman</code></h2> <ol class="second"> <li>Probieren geht über Studieren</li> </ol> </body> </html>

Für Aufzählungslisten (ul) können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen; für nummerierte Listen (ol) können Sie die Darstellung der Durchnummerierung beeinflussen. Erlaubt ist unter anderem eine der folgenden Angaben:

  • für ungeordnete Listen (ul)
    • disc, gefüllter Kreis als Bullet-Zeichen, Voreinstellung
    • circle, leerer Kreis als Bullet-Zeichen
    • square, quadratisches Bullet-Zeichen
    • none, kein Bullet-Zeichen
    • inherit, Bullet-Zeichen des Elternelements
  • für geordnete Listen (ol)
    • decimal, Nummerierung 1., 2., 3., 4. usw.
    • decimal-leading-zero, Nummerierung 01., 02., 03., 04. 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.
    • lower-latin, ebenso
    • upper-alpha, Nummerierung A., B., C., D. usw.
    • upper-latin, ebenso
    • none, keine Nummerierung
    • inherit, Nummerierung des Elternelements

Durch das Attribut start im Starttag einer geordneten Liste können Sie die Nummerierung beeinflussen; das Setzen des reversed-Attributs bewirkt eine Umkehrung der Zählrichtung.

Außerdem gibt es Nummerierungen in vielen verschiedenen Sprachen wie z.B. hebräisch, chinesisch usw.

CSS3[Bearbeiten]

  • CSS 3.0
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

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, …
Beachten Sie, dass der Browsersupport noch sehr unterschiedlich ist.

Weblinks[Bearbeiten]

W3C - alle vordefinierten Aufzählungszeichen und Nummerierungen