Articles
Pengenalan kepada CSS
Sifat berkaitan senarai CSS

Sifat berkaitan senarai CSS

Artikel ini menjelaskan sifat berkaitan senarai CSS.

Anda boleh belajar cara menggunakan dan menulis sifat list-style dan fungsi counter().

YouTube Video

HTML untuk Pratonton

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>

Berkaitan Senarai

Sifat 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}

Sifat list-style adalah sifat CSS yang digunakan untuk menentukan gaya penanda senarai (peluru) atau nombor untuk elemen senarai HTML seperti <ul> dan <ol>. Sifat ini membolehkan anda mengawal gaya keseluruhan senarai, menjadikannya berguna untuk menyesuaikan rupa senarai.

Dalam contoh ini, gaya berikut digunakan.

  • ul: Peluru bulatan kosong dipaparkan di dalam.
  • ol: Dinomborkan dengan angka Rom huruf besar dan nombor dipaparkan di luar.
  • Kelas custom-list: Gambar yang ditentukan dipaparkan sebagai peluru.

Struktur list-style

list-style adalah singkatan untuk tiga sifat berikut:

  • list-style-type: Menentukan jenis penanda (peluru atau nombor) untuk item senarai.
  • list-style-position: Menentukan sama ada penanda diletakkan di dalam (inside) atau di luar (outside) item senarai.
  • list-style-image: Menentukan gambar untuk digunakan sebagai penanda senarai.

Penggunaan Asas 

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

Kod ini berfungsi seperti berikut:

  • list-style-type: square: Menetapkan jenis penanda kepada bentuk segi empat.
  • list-style-position: inside: Penanda dipaparkan di dalam item senarai.
  • list-style-image: url('path/to/image.png'): Menggunakan gambar sebagai penanda.

Penjelasan Sifat Individu

list-style-type

list-style-type menentukan jenis penanda untuk senarai. Gaya yang tersedia untuk digunakan bergantung pada jenis senarai.

Contoh nilai 
 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: Tiada penanda dipaparkan.
  • disc (lalai): Satu bulatan hitam kecil.
  • circle: Satu bulatan kosong kecil (cincin).
  • square: Satu petak kecil.
  • decimal: Senarai bernombor seperti 1, 2, 3, ....
  • lower-alpha: Huruf kecil seperti a, b, c, ....
  • upper-alpha: Huruf besar seperti A, B, C, ....
  • lower-roman: Nombor Roman kecil seperti i, ii, iii, ....
  • upper-roman: Nombor Roman besar seperti I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

list-style-position menentukan sama ada penanda (bullet) diletakkan di luar atau di dalam item senarai. list-style-position boleh mempunyai nilai-nilai berikut:.

  • outside: Penanda diletakkan di luar item senarai, dan item bermula selepas penanda. Ini adalah nilai lalai.
  • inside: Penanda diletakkan di dalam item senarai dan dipaparkan sebagai sebahagian daripada teks.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image digunakan apabila gambar digunakan sebagai penanda senarai. Gambar ditetapkan menggunakan url(), dan jika gambar tidak dapat dimuatkan, penanda yang ditentukan oleh list-style-type akan dipaparkan.

Sifat ringkas list-style 

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

list-style adalah sifat ringkas yang boleh menetapkan list-style-type, list-style-position, dan list-style-image sekaligus. Susunan ini fleksibel, tetapi biasanya ditulis seperti dalam contoh ini. Dalam kes ini, peluru berbentuk petak dipaparkan di dalam item senarai, dan gambar dipaparkan sebagai penanda.

Ringkasan

  • list-style adalah sifat ringkas yang membolehkan anda menentukan rupa senarai (jenis penanda, kedudukan, gambar tersuai) sekaligus.
  • Adalah mungkin untuk menetapkan list-style-type, list-style-position, list-style-image secara individu.
  • Anda boleh menyesuaikan penanda senarai dengan fleksibel mengikut susunan dan reka bentuk.

Pengira 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}

Anda boleh menggunakan pengira CSS untuk menomborkan item senarai atau elemen tertentu secara automatik.

Mencipta dan Memulakan Pengira 

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

Anda boleh mencipta pengira dan menetapkannya semula dengan sifat counter-reset.

Meningkatkan Pengira 

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}

Anda meningkatkan pengira dengan sifat counter-increment dan memaparkan nilai pengira dengan fungsi counter.

counters()

Fungsi counters dalam CSS sangat berguna untuk mengurus pengira tersuai, seperti menomborkan item senarai atau menyusun perenggan. Fungsi ini boleh menggabungkan pelbagai nilai pengira dengan rentetan dan memaparkannya dalam kandungan CSS. Di sini, kami akan menerangkan secara terperinci dari penggunaan asas fungsi counters hingga contoh aplikasi praktikal.

Perbezaan antara counter dan counters

Kedua-dua fungsi counter dan counters digunakan untuk memaparkan nilai pengira, tetapi mereka mempunyai perbezaan berikut.

  • counter: Mendapatkan nilai bagi satu pengira.
  • counters: Menggabungkan pelbagai nilai pengira dengan pemisah tertentu dan memaparkannya.

Sebagai contoh, jika anda ingin menggunakan pengira dengan item senarai bersarang, anda boleh menggunakan fungsi counters untuk memaparkannya dengan menggabungkan pengira induk dan anak.

Sintaks Fungsi counters 

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

Fungsi counters digunakan dengan sintaks berikut.

  • <counter-name>: Menentukan nama pengira yang hendak digunakan.
  • <string>: Menentukan rentetan yang akan disisipkan antara setiap pengira (biasanya pemisah seperti . atau -).

Contoh menggunakan fungsi counters

Seterusnya, mari kita lihat contoh menggunakan fungsi 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}
  • Dalam contoh ini, pengira induk dan anak digabungkan untuk senarai bersarang dua peringkat.
    • list-counter pembilang sedang ditakrifkan.
    • Fungsi counters digunakan untuk menggabungkan dan memaparkan pembilang senarai induk dan pembilang senarai anak.

Contoh lanjutan menggunakan pembilang pelbagai peringkat

Dengan menggunakan fungsi counters, anda boleh mengurus pembilang pelbagai peringkat dengan fleksibel seperti penomboran khas atau penomboran perenggan. Sebagai contoh, ia berguna apabila mencipta dokumen yang termasuk bab dan seksyen.

 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}

Dalam kod ini, pembilang untuk bab (h1), seksyen (h2), dan sub-seksyen (h3) masing-masing direset, dan fungsi counters digunakan untuk mencantumkan setiap peringkat.

Ringkasan

Fungsi counters sangat berguna apabila anda ingin menyesuaikan dan memaparkan pelbagai pembilang secara hierarki. Dengan menggunakan pembilang CSS, anda boleh menyesuaikan penomboran bagi senarai dan heading dengan bebas, memberikan halaman web struktur maklumat yang maju.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat CSS yang berkaitan dengan hiasan model kotakProperti CSS Berkaitan dengan Jadual