Über die in diesem Tutorial gezeigten CSS-Eigenschaften lassen sich Listen gestalten. Die Angaben beziehen sich dabei auf die HTML-Elemente ul und ol. Ihr könnt also geordnete und ungeordnete Listen euren Wünschen entsprechend anpassen.
Allgemeine Angaben zur Liste
Bei list-style handelt es sich um eine Zusammenfassung der drei folgenden Eigenschaften:
• list-style-type
• list-style-position
• list-style-image
Über list-style lässt sich die Art der grafischen Darstellung der Bullets vor Aufzählungen und deren Einrückung beeinflussen. Die genannten Angaben werden jeweils durch ein Komma voneinander getrennt notiert. Die Reihenfolge ist dabei egal. Außerdem muss nicht zu jeder Eigenschaft ein Wert angegeben werden.
Ein Beispiel Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Im Browser sieht das folgendermaßen aus:
Grafische Aufzählungszeichen
Ihr könnt eine eigene Grafik als Aufzählungszeichen angeben. Verwendet wird dafür die Eigenschaft list-style-image. Die folgenden Werte sind möglich:
• url – der Dateiname und eventuell Pfad der Grafik
• none – es wird keine Grafik angezeigt.
Ein Beispiel:
ul {
list-style-image: url(bullet.gif);
}
Achtet darauf, dass der Pfad zu der bei URL angegebenen Grafik stimmt.
Wurde ein falscher Pfad angegeben, sollten die Browser auf ein Standardaufzählungszeichen zurückgreifen.
Die Position der Aufzählungszeichen
Über list-style-position wird festgelegt, wie sich Nummerierungen oder Aufzählungszeichen hinsichtlich der Einrückung verhalten sollen.
• inside – die erste Zeile wird so weit eingerückt, dass Aufzählungszeichen und Listeneintrag linksbündig abschließen.
• outside – das Aufzählungszeichen steht links vom Listeneintrag.
Im folgenden Beispiel werden die beiden Werte inside und outside verwendet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Eine inside-Liste:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Eine outside-Liste:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>So sieht man direkt, welche unterschiedlichen Auswirkungen diese beiden Werte tatsächlich haben.
Das Aussehen der Aufzählungszeichen festlegen
Für die Bullet- beziehungsweise Aufzählungszeichen können Sie das Aussehen explizit bestimmen. Ebenso lässt sich die Darstellung nummerierter Listen beeinflussen. Verwendet wird dafür die Eigenschaft list-style-type. Erlaubt sind bei dieser Eigenschaft die folgenden Werte:
• decimal – für ol-Listen: Nummerierung 1, 2, 3 usw.
• lower-roman – für ol-Listen: Nummerierung i., ii., iii. usw.
• upper-roman – für ol-Listen: Nummerierung I., II., III., IV. usw.
• lower-alpha oder lower-latin – für ol-Listen: Nummerierung I., II., III., IV. usw.
• upper-alpha oder upper-latin – für ol-Listen: Nummerierung A., B., C., D. usw.
• disc – für ul-Listen: gefüllter Kreis als Bullet-Zeichen
• circle – für ul-Listen: leerer Kreis als Bullet-Zeichen
• square – für ul-Listen: Rechteck als Bullet-Zeichen
• none – weder Bullet-Zeichen noch Nummerierung
• lower-greek – für ol-Listen: Nummerierung mit griechischen Buchstaben
• hebrew – für ol-Listen: Nummerierung mit hebräischen Buchstaben
• decimal-leading-zero – für ol-Listen: Nummerierung mit führender Null 0: 01., 02., 03., 04. usw.
• cjk-ideographic – für ol-Listen: Nummerierung mit ideografischen Zeichen
• hiragana – für ol-Listen: japanische Nummerierung (mit Kleinbuchstaben)
• katakana – für ol-Listen: japanische Nummerierung (mit Großbuchstaben)
• hiragana-iroha – für ol-Listen: japanische Nummerierung (mit Kleinbuchstaben)
• katakana-iroha – für ol-Listen: japanische Nummerierung (mit Großbuchstaben)
Im folgenden Beispiel werden einige der aufgeführten Varianten verwendet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Im Browser ergibt sich folgendes Bild:
Zähler
Über ol-Listen lassen sich Inhalte nummerieren. Bei komplexeren Anwendungen ist diese Form der Nummerierung allerdings nicht wirklich praktikabel. CSS bietet hierfür mit den Countern eine Alternative.
Nachfolgend zeige ich euch, wie sich Counter nutzen lassen.
Zunächst einmal lege ich für das body-Element einen neuen Counter an.
body {
counter-reset: kapitel;
}Dank dieser Definition existiert der Counter kapitel im Dokument. Diesen Counter kann man nun verwenden.
h1 {
counter-increment: kapitel;
}
Durch die gezeigte Syntax wird der Zähler jeweils automatisch um den Wert 1 erhöht, wenn ein neues h1-Element auftaucht. Das Problem dabei: Von der Zählung ist momentan noch nichts zu sehen. Das lässt sich ganz einfach durch den Einsatz von Pseudoelementen ändern.
h1::before {
content: counter(kapitel) ". ";
}
Eine vollständige Anwendung könnte folgendermaßen aussehen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h1>Kapitel</h1>
</body>
</html>Und hier das Ergebnis im Browser:
Im gezeigten Beispiel wird durch ::before die jeweilige Nummer am Anfang des h1-Elements ausgegeben. Damit die Ziffer nicht direkt am Text der Überschrift hängt, werden nach der Ziffer ein Punkt und ein Leerzeichen eingefügt.
content: counter(kapitel) ". "
Verschachtelte Zählungen sind ebenfalls möglich. Dazu definiert man den Counter an der Stelle, an der er letztendlich wieder von vorne beginnen soll.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}So wird in diesem Beispiel der Zähler immer dann zurückgesetzt, wenn ein neues h1-Element auftaucht. Das folgende Beispiel zeigt eine typische Anwendung für verschachtelte Counter.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
</body>
</html>Im Browser sieht das Ganze folgendermaßen aus:
Die Beispiele haben gezeigt, wie leistungsfähig Counter sind.
