Articles
Einführung in CSS
Listenbezogene CSS-Eigenschaften

Listenbezogene CSS-Eigenschaften

Dieser Artikel erklärt listenbezogene CSS-Eigenschaften.

Hier erfahren Sie, wie Sie die list-style-Eigenschaft und die counter()-Funktion verwenden und schreiben können.

YouTube Video

HTML zur Vorschau

css-list.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

Listenbezogen

list-style-Eigenschaft 

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

Die list-style-Eigenschaft ist eine CSS-Eigenschaft, die verwendet wird, um den Stil von Listenmarkierungen (Punkte) oder Zahlen für HTML-Listenelemente wie <ul> und <ol> festzulegen. Diese Eigenschaft ermöglicht es Ihnen, den gesamten Stil der Liste zu steuern, was nützlich ist, um das Erscheinungsbild von Listen anzupassen.

In diesem Beispiel werden die folgenden Stile angewendet:.

  • ul: Hohle Kreis-Punkte werden innen angezeigt.
  • ol: Nummerierung mit römischen Großbuchstaben, und die Zahlen werden außen angezeigt.
  • custom-list-Klasse: Das angegebene Bild wird als Listenpunkt angezeigt.

list-style-Struktur

list-style ist eine Kurzform für die folgenden drei Eigenschaften:

  • list-style-type: Gibt den Typ der Markierung (Punkt oder Zahl) für Listenelemente an.
  • list-style-position: Gibt an, ob die Markierung innerhalb (inside) oder außerhalb (outside) des Listenelements platziert wird.
  • list-style-image: Gibt ein Bild an, das als Listenmarkierung verwendet wird.

Grundlegende Verwendung 

1ul {
2    list-style: square inside url('path/to/image.png');
3}

Dieser Code funktioniert wie folgt:

  • list-style-type: square: Setzt den Markierungstyp auf eine quadratische Form.
  • list-style-position: inside: Die Markierung wird innerhalb des Listenelements angezeigt.
  • list-style-image: url('path/to/image.png'): Verwendet ein Bild als Markierung.

Erklärung der einzelnen Eigenschaften

list-style-type

list-style-type gibt den Typ des Markers für die Liste an. Die verfügbaren Stile hängen vom Listentyp ab.

Beispiel für einen Wert 
 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}
  • none: Es wird kein Marker angezeigt.
  • disc (Standard): Ein kleiner schwarzer Kreis.
  • circle: Ein kleiner leerer Kreis (Ring).
  • square: Ein kleines Quadrat.
  • decimal: Eine nummerierte Liste wie 1, 2, 3, ....
  • lower-alpha: Kleinbuchstaben wie a, b, c, ....
  • upper-alpha: Großbuchstaben wie A, B, C, ....
  • lower-roman: Römische Zahlen in Kleinbuchstaben wie i, ii, iii, ....
  • upper-roman: Römische Zahlen in Großbuchstaben wie I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

Die Eigenschaft list-style-position gibt an, ob der Marker (Punkt) außerhalb oder innerhalb des Listenpunkts platziert wird. list-style-position kann die folgenden Werte haben:.

  • outside: Marker werden außerhalb des Listenelements platziert, und das Element beginnt nach dem Marker. Dies ist der Standardwert.
  • inside: Marker werden innerhalb des Listenelements platziert und als Teil des Textes angezeigt.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

Die Eigenschaft list-style-image wird verwendet, wenn ein Bild als Listenmarker verwendet wird. Das Bild wird mit url() angegeben, und wenn das Bild nicht geladen werden kann, wird der durch list-style-type angegebene Marker angezeigt.

Kurzschreibweise der Eigenschaft list-style 

1ul {
2    list-style: square inside url('bullet.png');
3}

Die Eigenschaft list-style ist eine Kurzschreibweise, die list-style-type, list-style-position und list-style-image gleichzeitig festlegen kann. Die Reihenfolge ist flexibel, wird jedoch normalerweise wie in diesem Beispiel geschrieben. In diesem Fall wird ein quadratischer Marker innerhalb des Listenelements angezeigt, und ein Bild wird als Marker verwendet.

Zusammenfassung

  • list-style ist eine Kurzschreibweise, die es ermöglicht, die Darstellung der Liste (Markertyp, Position, benutzerdefiniertes Bild) auf einmal festzulegen.
  • Es ist auch möglich, list-style-type, list-style-position und list-style-image individuell festzulegen.
  • Sie können die Listenzeichen flexibel entsprechend dem Layout und Design anpassen.

CSS-Zähler (counter()) 

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

Sie können CSS-Zähler verwenden, um Listenelemente oder bestimmte Elemente automatisch zu nummerieren.

Zähler erstellen und initialisieren 

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

Sie können einen Zähler erstellen und mit der Eigenschaft counter-reset zurücksetzen.

Zähler inkrementieren 

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

Sie können einen Zähler mit der Eigenschaft counter-increment erhöhen und den Zählerwert mit der Funktion counter anzeigen.

counters()

Die Funktion counters in CSS ist sehr nützlich, um benutzerdefinierte Zähler zu verwalten, z. B. zum Nummerieren von Listenelementen oder Anordnen von Absätzen. Diese Funktion kann mehrere Zählerwerte mit einer Zeichenkette verketten und im CSS-Content anzeigen. Hier erklären wir im Detail die grundlegende Verwendung der Funktion counters bis hin zu praktischen Anwendungsbeispielen.

Unterschiede zwischen counter und counters

Die Funktionen counter und counters werden beide verwendet, um Zählerwerte anzuzeigen, aber sie weisen die folgenden Unterschiede auf.

  • counter: Ruft den Wert eines einzelnen Zählers ab.
  • counters: Verkettet mehrere Zählerwerte mit einem angegebenen Trennzeichen und zeigt sie an.

Wenn Sie beispielsweise Zähler mit verschachtelten Listenelementen verwenden möchten, können Sie die Funktion counters verwenden, um sie durch Verketten der übergeordneten und untergeordneten Zähler anzuzeigen.

Syntax der Funktion counters 

counters(<counter-name>, <string>);

Die Funktion counters wird mit der folgenden Syntax verwendet.

  • <counter-name>: Gibt den Namen des zu verwendenden Zählers an.
  • <string>: Gibt die Zeichenkette an, die zwischen den einzelnen Zählern eingefügt werden soll (normalerweise ein Trennzeichen wie . oder -).

Beispiel für die Verwendung der Funktion counters

Sehen wir uns als Nächstes ein Beispiel für die Verwendung der Funktion counters an.

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}
  • In diesem Beispiel werden die übergeordneten und untergeordneten Zähler für eine zweistufig verschachtelte Liste verkettet.
    • Der list-counter-Zähler wird definiert.
    • Die counters-Funktion wird verwendet, um den übergeordneten und den untergeordneten Listen-Zähler zu verketten und anzuzeigen.

Erweitertes Beispiel mit mehrstufigen Zählern

Mit der Funktion counters können Sie mehrstufige Zähler wie benutzerdefinierte Nummerierungen oder Absatznummerierungen flexibel verwalten. Dies ist beispielsweise nützlich, wenn Sie Dokumente erstellen, die Kapitel und Abschnitte enthalten.

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

In diesem Code werden die Zähler für Kapitel (h1), Abschnitte (h2) und Unterabschnitte (h3) jeweils zurückgesetzt, und die Funktion counters wird verwendet, um jede Ebene zu verketten.

Zusammenfassung

Die Funktion counters ist sehr nützlich, wenn Sie mehrere Zähler hierarchisch anpassen und anzeigen möchten. Durch die Verwendung von CSS-Zählern können Sie die Nummerierung von Listen und Überschriften frei anpassen und Webseiten eine erweiterte Informationsstruktur verleihen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften im Zusammenhang mit der Dekoration des Box-ModellsTabellenbezogene CSS-Eigenschaften