Articles
Introduktion till CSS
CSS-egenskaper relaterade till listor

CSS-egenskaper relaterade till listor

Den här artikeln förklarar CSS-egenskaper relaterade till listor.

Du kan lära dig hur du använder och skriver egenskapen list-style och funktionen counter().

YouTube Video

HTML för förhandsgranskning

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>

Relaterade till listor

Egenskapen list-style 

 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}

Egenskapen list-style är en CSS-egenskap som används för att ange stilen på listmarkörer (punkter) eller nummer för HTML-listor såsom <ul> och <ol>. Den här egenskapen låter dig kontrollera listans övergripande stil, vilket gör den användbar för att anpassa listornas utseende.

I detta exempel används följande stilar.

  • ul: Ihåliga cirkelpunkter visas inuti.
  • ol: Numreras med stora romerska siffror och siffrorna visas utanför.
  • custom-list-klassen: Den angivna bilden visas som en punkt.

Strukturen för list-style

list-style är en genväg för följande tre egenskaper:

  • list-style-type: Anger typen av markör (punkt eller nummer) för listelement.
  • list-style-position: Anger om markören placeras inuti (inside) eller utanför (outside) listelementet.
  • list-style-image: Anger en bild som ska användas som listmarkör.

Grundläggande användning 

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

Den här koden fungerar på följande sätt:

  • list-style-type: square: Anger markörtypen till en kvadratisk form.
  • list-style-position: inside: Markören visas inuti listelementet.
  • list-style-image: url('path/to/image.png'): Använder en bild som markör.

Förklaring av individuella egenskaper

list-style-type

list-style-type anger typen av markör för listan. De tillgängliga stilarna beror på listtypen.

Exempel på värde 
 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: Ingen markör visas.
  • disc (standard): En liten svart cirkel.
  • circle: En liten tom cirkel (ring).
  • square: En liten fyrkant.
  • decimal: En numrerad lista som 1, 2, 3, ....
  • lower-alpha: Små bokstäver som a, b, c, ....
  • upper-alpha: Versaler som A, B, C, ....
  • lower-roman: Små romerska siffror som i, ii, iii, ....
  • upper-roman: Stora romerska siffror som I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

list-style-position-egenskapen anger om markören (punkten) placeras utanför eller inuti listobjektet. list-style-position kan ha följande värden:.

  • outside: Markörer placeras utanför listobjektet, och objektet börjar efter markören. Det här är standardvärdet.
  • inside: Markörer placeras inuti listobjektet och visas som en del av texten.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image-egenskapen används när en bild används som listmarkör. Bilden anges med url(), och om bilden inte kan laddas visas markören som anges av list-style-type.

list-style-sammandragen egenskap 

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

list-style är en sammandragen egenskap som kan ställa in list-style-type, list-style-position och list-style-image på en gång. Ordningen är flexibel, men den skrivs vanligtvis som i det här exemplet. I detta fall visas en fyrkantig punkt inuti listobjektet, och en bild visas som en markör.

Sammanfattning

  • list-style är en sammandragen egenskap som låter dig specificera listans utseende (markörtyp, position, anpassad bild) på en gång.
  • Det är också möjligt att ställa in list-style-type, list-style-position, och list-style-image individuellt.
  • Du kan flexibelt anpassa listmarkörerna efter layout och design.

CSS-räknare (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}

Du kan använda CSS-räknare för att automatiskt numrera listobjekt eller specifika element.

Att skapa och initiera räknare 

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

Du kan skapa en räknare och återställa den med egenskapen counter-reset.

Att öka räknare 

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}

Du ökar en räknare med egenskapen counter-increment och visar räknarens värde med funktionen counter.

counters()

Funktionen counters i CSS är mycket användbar för att hantera anpassade räknare, till exempel numrera listobjekt eller ordna stycken. Denna funktion kan sammanfoga flera räknarvärden med en sträng och visa det i CSS-innehållet. Här kommer vi att förklara i detalj från grundläggande användning av funktionen counters till praktiska tillämpningsexempel.

Skillnader mellan counter och counters

Både funktionerna counter och counters används för att visa räknarvärden, men de har följande skillnader.

  • counter: Hämtar värdet av en enda räknare.
  • counters: Sammanfogar flera räknarvärden med en angiven separator och visar dem.

Till exempel, om du vill använda räknare med nästlade listobjekt kan du använda funktionen counters för att visa dem genom att sammanfoga de överordnade och underordnade räknarna.

Syntaxen för funktionen counters 

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

Funktionen counters används med följande syntax.

  • <counter-name>: Anger namnet på den räknare som ska användas.
  • <string>: Anger strängen som ska infogas mellan varje räknare (vanligtvis en separator som . eller -).

Exempel på att använda funktionen counters

Låt oss sedan titta på ett exempel som använder funktionen 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}
  • I detta exempel sammanfogas de överordnade och underordnade räknarna för en två-nivås nästlad lista.
    • list-counter-räknaren definieras.
    • counters-funktionen används för att sammanfoga och visa föräldralisträknaren och barnlisträknaren.

Avancerat exempel med flernivåräknare

Genom att använda funktionen counters kan du flexibelt hantera flernivåräknare, som anpassad numrering eller styckenumrering. Det är till exempel användbart när du skapar dokument som innehåller kapitel och avsnitt.

 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}

I denna kod återställs räknarna för kapitel (h1), avsnitt (h2) och underavsnitt (h3) var för sig, och funktionen counters används för att slå samman varje nivå.

Sammanfattning

Funktionen counters är mycket användbar när du vill anpassa och visa flera räknare hierarkiskt. Genom att använda CSS-räknare kan du fritt anpassa numreringen av listor och rubriker, vilket ger webbsidor en avancerad informationsstruktur.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper relaterade till boxmodellens dekorationTabell-relaterade CSS-egenskaper