CSS/Eigenschaften/Listenformatierung/list-style-type

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft list-style-type ermöglicht es, für Aufzählungslisten (ul) das Erscheinungsbild des Bullet-Zeichens; für nummerierte Listen (ol) die Darstellung der Durchnummerierung zu beeinflussen. Sie können die Eigenschaft für die Liste, aber auch für das Listenelement setzen.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Erlaubt ist unter anderem eine der folgenden Angaben:

  • für ungeordnete Listen (ul)
    • disc, Standardwert gefüllter Kreis als Bullet-Zeichen
    • 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.


Beispiel: verschiedene Werte für list-style-type ansehen …
        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;}

frei wählbare Aufzählungszeichen[Bearbeiten]

Mit CSS3 sollen auch eigene Aufzählungszeichen durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; festgelegt werden können.

  • CSS 3.0
  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer
Beispiel: frei wählbare Aufzählungszeichen ansehen …
/* Variante mit string */
.zeichenkette {
  list-style-type: "♥ ";
}

/* Variante mit at-Regel */
@counter-style box {
	system: cyclic;
	symbols: '\25FD ';
	suffix: ' ';
}

.symbols {
  list-style-type: box;
}

Mit dieser Methode können Sie (allerdings nur im Firefox) ein beliebiges Zeichen oder eine Zeichenkette als Aufzählungszeichen verwenden. Eine weitere Formatierung ist allerdings nicht möglich.

Diese könnten Sie erreichen, indem Sie die Aufzählungszeichen mit list-style-type: none; ausblenden und durch ein Pseudoelement ersetzen, dass dann unabhängig vom Listenelement gestylt werden kann.


Weblinks[Bearbeiten]