Articles
Wprowadzenie do CSS
Właściwości CSS związane z listami

Właściwości CSS związane z listami

Ten artykuł wyjaśnia właściwości CSS związane z listami.

Możesz nauczyć się, jak używać i pisać właściwość list-style oraz funkcję counter().

YouTube Video

HTML do podglądu

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>

Związane z listami

Właściwość 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}

Właściwość list-style to właściwość CSS używana do określenia stylu znaczników listy (punktów) lub numerów dla elementów listy HTML, takich jak <ul> i <ol>. Ta właściwość pozwala kontrolować ogólny styl listy, co czyni ją przydatną do dostosowywania wyglądu list.

W tym przykładzie zastosowano następujące style.

  • ul: Wewnątrz wyświetlane są puste kółka jako punkty.
  • ol: Numerowane wielkimi cyframi rzymskimi, a liczby wyświetlane są na zewnątrz.
  • Klasa custom-list: Określony obraz jest wyświetlany jako punkt.

Struktura list-style

list-style jest skrótem dla następujących trzech właściwości:

  • list-style-type: Określa typ znacznika (punktu lub numeru) dla elementów listy.
  • list-style-position: Określa, czy znacznik znajduje się wewnątrz (inside) czy na zewnątrz (outside) elementu listy.
  • list-style-image: Określa obraz do użycia jako znacznik listy.

Podstawowe użycie 

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

Ten kod działa w następujący sposób:

  • list-style-type: square: Ustawia typ znacznika na kształt kwadratu.
  • list-style-position: inside: Znacznik jest wyświetlany wewnątrz elementu listy.
  • list-style-image: url('path/to/image.png'): Używa obrazu jako znacznika.

Wyjaśnienie poszczególnych właściwości

list-style-type

list-style-type określa typ znacznika dla listy. Dostępne do użycia style zależą od typu listy.

Przykład wartości 
 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: Żaden znacznik nie jest wyświetlany.
  • disc (domyślnie): Małe czarne kółko.
  • circle: Małe puste kółko (pierścień).
  • square: Mały kwadrat.
  • decimal: Numerowana lista jak 1, 2, 3, ....
  • lower-alpha: Małe litery alfabetu, np. a, b, c, ....
  • upper-alpha: Wielkie litery alfabetu, np. A, B, C, ....
  • lower-roman: Małe cyfry rzymskie, np. i, ii, iii, ....
  • upper-roman: Wielkie cyfry rzymskie, np. I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

list-style-position określa, czy znacznik (punkt) znajduje się na zewnątrz, czy wewnątrz elementu listy. list-style-position może przyjmować następujące wartości:.

  • outside: Znaczniki znajdują się na zewnątrz elementu listy, a element zaczyna się po znaczniku. To jest domyślna wartość.
  • inside: Znaczniki znajdują się wewnątrz elementu listy i są wyświetlane jako część tekstu.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image jest ustawiane, gdy jako znacznik listy używa się obrazu. Obraz jest określany za pomocą url(), a jeśli nie można go załadować, wyświetlony zostanie znacznik określony przez list-style-type.

Skrótowa właściwość list-style 

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

Właściwość list-style to skrótowa właściwość, która umożliwia jednoczesne ustawienie list-style-type, list-style-position i list-style-image. Kolejność jest elastyczna, ale zazwyczaj zapisuje się ją tak jak w tym przykładzie. W tym przypadku mały kwadratowy punkt jest wyświetlany wewnątrz elementu listy, a obraz jest używany jako znacznik.

Podsumowanie

  • list-style jest skrótową właściwością, która pozwala jednocześnie określić wygląd listy (typ znacznika, pozycję, własny obraz).
  • Możliwe jest także indywidualne ustawienie list-style-type, list-style-position oraz list-style-image.
  • Możesz elastycznie dostosować znaczniki listy do układu i projektu.

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

Możesz użyć liczników CSS, aby automatycznie numerować elementy listy lub konkretne elementy.

Tworzenie i inicjalizacja liczników 

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

Możesz utworzyć licznik i zresetować go za pomocą właściwości counter-reset.

Zwiększanie liczników 

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}

Możesz zwiększyć licznik za pomocą właściwości counter-increment i wyświetlić jego wartość za pomocą funkcji counter.

counters()

Funkcja counters w CSS jest bardzo przydatna do zarządzania niestandardowymi licznikami, takimi jak numerowanie elementów listy lub akapitów. Ta funkcja może łączyć wiele wartości liczników za pomocą ciągu znaków i wyświetlać je w zawartości CSS. Tutaj szczegółowo wyjaśnimy podstawowe zastosowanie funkcji counters oraz jej praktyczne przykłady użycia.

Różnice między funkcją counter a counters

Obie funkcje counter i counters są używane do wyświetlania wartości liczników, ale mają następujące różnice.

  • counter: Pobiera wartość pojedynczego licznika.
  • counters: Łączy wiele wartości liczników za pomocą określonego separatora i wyświetla je.

Na przykład, jeśli chcesz użyć liczników w zagnieżdżonych elementach listy, możesz użyć funkcji counters, aby wyświetlić je poprzez połączenie liczników nadrzędnych i podrzędnych.

Składnia funkcji counters 

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

Funkcja counters jest używana w następującej składni:.

  • <counter-name>: Określa nazwę licznika, którego należy użyć.
  • <string>: Określa ciąg znaków, który ma zostać wstawiony między każde liczniki (zazwyczaj separator, np. . lub -).

Przykład użycia funkcji counters

Następnie przyjrzyjmy się przykładowi użycia funkcji 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}
  • W tym przykładzie liczniki nadrzędne i podrzędne są połączone dla dwupoziomowej zagnieżdżonej listy.
    • Licznik list-counter jest definiowany.
    • Funkcja counters jest używana do łączenia i wyświetlania licznika listy nadrzędnej oraz licznika listy podrzędnej.

Zaawansowany przykład wykorzystania liczników wielopoziomowych

Używając funkcji counters, możesz elastycznie zarządzać licznikami wielopoziomowymi, takimi jak niestandardowa numeracja czy numeracja akapitów. Na przykład jest to przydatne podczas tworzenia dokumentów zawierających rozdziały i sekcje.

 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}

W tym kodzie liczniki dla rozdziałów (h1), sekcji (h2) i podsekcji (h3) są resetowane, a funkcja counters jest używana do łączenia poszczególnych poziomów.

Podsumowanie

Funkcja counters jest bardzo przydatna, gdy chcesz dostosować i hierarchicznie wyświetlać wiele liczników. Korzystając z liczników CSS, możesz swobodnie dostosowywać numerację list i nagłówków, nadając stronom internetowym zaawansowaną strukturę informacyjną.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z dekoracją modelu pudełkowegoWłaściwości CSS związane z tabelami