CSS/Eigenschaften/Listenformatierung/list-style-type

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.

• 
• 
• 
• 
• 
• 

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.

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;}

ansehen …

frei wählbare Aufzählungszeichen

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.

• 
• 
• 
• 
• 
• 

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;
}

ansehen …

Mit dieser Methode können Sie (allerdings nur im Chrome und 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.

Hauptartikel: CSS/Tutorials/Listen mit CSS gestalten

Siehe auch

• CSS/Eigenschaften/generierter Inhalt/Nummerierung
• Listen mit hybrider Nummerierung formatieren

Weblinks

• CCSWG: CSS Lists Module Level 3
• W3C: alle vordefinierten Aufzählungszeichen und Nummerierungen (CSS2.1)