Articles
Introductie tot CSS
Lijstgerelateerde CSS-eigenschappen

Lijstgerelateerde CSS-eigenschappen

Dit artikel legt lijstgerelateerde CSS-eigenschappen uit.

U kunt leren hoe u de list-style-eigenschap en de counter()-functie kunt gebruiken en schrijven.

YouTube Video

HTML voor Voorbeeldweergave

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>

Lijstgerelateerd

list-style-eigenschap 

 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}

De list-style-eigenschap is een CSS-eigenschap die wordt gebruikt om de stijl van lijstmarkeringen (bolletjes) of nummers voor HTML-lijstelementen zoals <ul> en <ol> te specificeren. Met deze eigenschap kunt u de algehele stijl van de lijst bepalen, waardoor het nuttig is voor het aanpassen van de weergave van lijsten.

In dit voorbeeld worden de volgende stijlen toegepast.

  • ul: Holle cirkelmarkeringen worden binnenin weergegeven.
  • ol: Genummerd met hoofdletter Romeinse cijfers en de nummers worden buiten weergegeven.
  • custom-list-klasse: De opgegeven afbeelding wordt weergegeven als een markering.

list-style-structuur

list-style is een verkorte notatie voor de volgende drie eigenschappen:

  • list-style-type: Geeft het type markering (bolletje of nummer) voor lijstelementen op.
  • list-style-position: Geeft aan of de markering binnen (inside) of buiten (outside) het lijstelement wordt geplaatst.
  • list-style-image: Geeft een afbeelding op die als lijstmarkering moet worden gebruikt.

Basisgebruik 

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

Deze code werkt als volgt:

  • list-style-type: square: Stelt het markeringstype in op een vierkante vorm.
  • list-style-position: inside: De markering wordt binnen het lijstelement weergegeven.
  • list-style-image: url('path/to/image.png'): Gebruikt een afbeelding als markering.

Uitleg van individuele eigenschappen

list-style-type

list-style-type specificeert het type markering voor de lijst. De beschikbare stijlen zijn afhankelijk van het lijsttype.

Voorbeeld van waarde 
 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: Er wordt geen markering weergegeven.
  • disc (standaard): Een kleine zwarte cirkel.
  • circle: Een kleine lege cirkel (ring).
  • square: Een klein vierkant.
  • decimal: Een genummerde lijst zoals 1, 2, 3, ....
  • lower-alpha: Kleine letters zoals a, b, c, ....
  • upper-alpha: Hoofdletters zoals A, B, C, ....
  • lower-roman: Kleine Romeinse cijfers zoals i, ii, iii, ....
  • upper-roman: Hoofdletter Romeinse cijfers zoals I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

De eigenschap list-style-position specificeert of de markering (bullet) buiten of binnen het lijstitem wordt geplaatst. De list-style-position kan de volgende waarden hebben:.

  • outside: Markeringen worden buiten het lijstitem geplaatst en het item begint na de markering. Dit is de standaardwaarde.
  • inside: Markeringen worden binnen het lijstitem geplaatst en weergegeven als onderdeel van de tekst.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

De list-style-image eigenschap wordt ingesteld bij het gebruik van een afbeelding als lijstmarkering. De afbeelding wordt gespecificeerd met url() en als de afbeelding niet kan worden geladen, wordt de markering weergegeven die is gespecificeerd door list-style-type.

list-style verkorte eigenschap 

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

De list-style eigenschap is een verkorte eigenschap die list-style-type, list-style-position en list-style-image tegelijk kan instellen. De volgorde is flexibel, maar wordt meestal geschreven zoals in dit voorbeeld. In dit geval wordt een vierkante markering binnen het lijstitem weergegeven en wordt een afbeelding weergegeven als markering.

Samenvatting

  • list-style is een verkorte eigenschap waarmee u het uiterlijk van de lijst (markeringstype, positie, aangepaste afbeelding) tegelijk kunt specificeren.
  • Het is ook mogelijk om list-style-type, list-style-position en list-style-image individueel in te stellen.
  • Je kunt de lijstmarkeringen flexibel aanpassen aan de lay-out en het ontwerp.

CSS-teller (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}

Je kunt CSS-tellers gebruiken om lijstitems of specifieke elementen automatisch te nummeren.

Counters maken en initialiseren 

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

Je kunt een teller maken en resetten met de eigenschap counter-reset.

Counters verhogen 

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}

Je verhoogt een teller met de eigenschap counter-increment en toont de tellerwaarde met de functie counter.

counters()

De functie counters in CSS is erg handig voor het beheren van aangepaste tellers, zoals het nummeren van lijstitems of het ordenen van alinea's. Deze functie kan meerdere tellerwaarden samenvoegen met een string en deze weergeven in CSS-content. Hier zullen we de basisgebruik van de functie counters tot en met praktische voorbeeldtoepassingen in detail uitleggen.

Verschillen tussen counter en counters

Beide functies, counter en counters, worden gebruikt om tellerwaarden weer te geven, maar ze hebben de volgende verschillen.

  • counter: Haalt de waarde van een enkele teller op.
  • counters: Voegt meerdere tellerwaarden samen met een opgegeven scheidingsteken en toont deze.

Als je bijvoorbeeld tellers wilt gebruiken met geneste lijstitems, kun je de functie counters gebruiken om ze weer te geven door de ouder- en kindtellers samen te voegen.

Syntaxis van de functie counters 

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

De functie counters wordt gebruikt met de volgende syntaxis:.

  • <counter-name>: Geeft de naam van de te gebruiken teller op.
  • <string>: Geeft de string op die tussen elke teller wordt ingevoegd (meestal een scheidingsteken zoals . of -).

Voorbeeld van het gebruik van de functie counters

Laten we vervolgens een voorbeeld bekijken van het gebruik van de functie counters.

 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 dit voorbeeld worden de ouder- en kindtellers samengevoegd voor een geneste lijst van twee niveaus.
    • De teller list-counter wordt gedefinieerd.
    • De functie counters wordt gebruikt om de ouderlijstteller en de kindlijstteller samen te voegen en weer te geven.

Geavanceerd voorbeeld met gebruik van meerledige tellers

Met de functie counters kunt u meerledige tellers flexibel beheren, zoals aangepaste nummering of alineanummering. Dit is bijvoorbeeld nuttig bij het maken van documenten met hoofdstukken en secties.

 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 deze code worden tellers voor hoofdstukken (h1), secties (h2) en subsecties (h3) telkens opnieuw ingesteld, en wordt de functie counters gebruikt om elk niveau samen te voegen.

Samenvatting

De functie counters is erg handig wanneer u meerdere tellers hiërarchisch wilt aanpassen en weergeven. Met CSS-tellers kunt u de nummering van lijsten en koppen vrij aanpassen, waardoor webpagina's een geavanceerde informatiestructuur krijgen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS-eigenschappen met betrekking tot de decoratie van het boxmodelTabelgerelateerde CSS-eigenschappen