Articles
Pengenalan ke CSS
Properti CSS terkait daftar

Properti CSS terkait daftar

Artikel ini menjelaskan properti CSS terkait daftar.

Anda dapat mempelajari cara menggunakan dan menulis properti list-style serta fungsi counter().

YouTube Video

HTML untuk Pratinjau

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>

Terkait daftar

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

Properti list-style adalah properti CSS yang digunakan untuk menentukan gaya penanda daftar (bullets) atau angka untuk elemen daftar HTML seperti <ul> dan <ol>. Properti ini memungkinkan Anda mengontrol gaya keseluruhan daftar, sehingga berguna untuk menyesuaikan tampilan daftar.

Dalam contoh ini, gaya berikut diterapkan.

  • ul: Peluru berbentuk lingkaran kosong ditampilkan di dalam.
  • ol: Dinyatakan dengan angka Romawi besar dan angka ditampilkan di luar.
  • Kelas custom-list: Gambar yang ditentukan ditampilkan sebagai peluru.

Struktur list-style

list-style adalah singkatan untuk tiga properti berikut:

  • list-style-type: Menentukan jenis penanda (peluru atau angka) untuk item daftar.
  • list-style-position: Menentukan apakah penanda ditempatkan di dalam (inside) atau di luar (outside) item daftar.
  • list-style-image: Menentukan gambar yang akan digunakan sebagai penanda daftar.

Penggunaan Dasar 

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

Kode ini bekerja sebagai berikut:

  • list-style-type: square: Mengatur jenis penanda ke bentuk persegi.
  • list-style-position: inside: Penanda ditampilkan di dalam item daftar.
  • list-style-image: url('path/to/image.png'): Menggunakan gambar sebagai penanda.

Penjelasan tentang Properti Individual

list-style-type

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

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: Tidak ada penanda yang ditampilkan.
  • disc (default): Lingkaran hitam kecil.
  • circle: Lingkaran kecil kosong (cincin).
  • square: Kotak kecil.
  • decimal: Daftar bernomor seperti 1, 2, 3, ....
  • lower-alpha: Huruf kecil seperti a, b, c, ....
  • upper-alpha: Huruf besar seperti A, B, C, ....
  • lower-roman: Angka Romawi kecil seperti i, ii, iii, ....
  • upper-roman: Angka Romawi besar seperti I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

Properti list-style-position menentukan apakah penanda (bullet) ditempatkan di luar atau di dalam item daftar. list-style-position dapat memiliki nilai berikut:.

  • outside: Penanda ditempatkan di luar item daftar, dan item dimulai setelah penanda. Ini adalah nilai default.
  • inside: Penanda ditempatkan di dalam item daftar dan ditampilkan sebagai bagian dari teks.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

Properti list-style-image digunakan saat menggunakan gambar sebagai penanda daftar. Gambar ditentukan menggunakan url(), dan jika gambar tidak dapat dimuat, penanda yang ditentukan oleh list-style-type akan ditampilkan.

Properti ringkas list-style 

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

Properti list-style adalah properti ringkas yang dapat mengatur list-style-type, list-style-position, dan list-style-image sekaligus. Urutannya fleksibel, tetapi biasanya ditulis seperti dalam contoh ini. Dalam kasus ini, peluru kotak ditampilkan di dalam item daftar, dan gambar ditampilkan sebagai penanda.

Ringkasan

  • list-style adalah properti ringkas yang memungkinkan Anda menentukan tampilan daftar (jenis penanda, posisi, gambar khusus) sekaligus.
  • Anda juga dapat mengatur list-style-type, list-style-position, list-style-image secara individual.
  • Anda dapat menyesuaikan penanda daftar secara fleksibel sesuai dengan tata letak dan desain.

Penghitung 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 dapat menggunakan penghitung CSS untuk memberi nomor secara otomatis pada item daftar atau elemen tertentu.

Membuat dan Menginisialisasi Penghitung 

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

Anda dapat membuat penghitung dan mengatur ulangnya dengan properti counter-reset.

Menambah Penghitung 

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 menambah nilai penghitung dengan properti counter-increment dan menampilkan nilai penghitung dengan fungsi counter.

counters()

Fungsi counters dalam CSS sangat berguna untuk mengelola penghitung khusus, seperti memberi nomor pada item daftar atau mengatur urutan paragraf. Fungsi ini dapat menggabungkan beberapa nilai penghitung dengan sebuah string dan menampilkannya di konten CSS. Di sini, kami akan menjelaskan secara rinci mulai dari penggunaan dasar fungsi counters hingga contoh aplikasi praktis.

Perbedaan antara counter dan counters

Fungsi counter dan counters keduanya digunakan untuk menampilkan nilai penghitung, tetapi memiliki perbedaan berikut.

  • counter: Mengambil nilai dari satu penghitung.
  • counters: Menggabungkan beberapa nilai penghitung dengan pemisah tertentu dan menampilkannya.

Sebagai contoh, jika Anda ingin menggunakan penghitung pada item daftar bersarang, Anda dapat menggunakan fungsi counters untuk menampilkannya dengan menggabungkan penghitung induk dan anak.

Sintaks Fungsi counters 

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

Fungsi counters digunakan dengan sintaks berikut.

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

Contoh penggunaan fungsi counters

Selanjutnya, mari kita lihat contoh penggunaan 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, penghitung induk dan anak digabungkan untuk daftar bersarang dua tingkat.
    • Penghitung list-counter sedang didefinisikan.
    • Fungsi counters digunakan untuk menggabungkan dan menampilkan penghitung daftar induk dan penghitung daftar anak.

Contoh lanjutan menggunakan penghitung multi-level

Dengan menggunakan fungsi counters, Anda dapat dengan fleksibel mengelola penghitung multi-level seperti penomoran khusus atau penomoran paragraf. Sebagai contoh, ini berguna ketika membuat dokumen yang mencakup bab dan bagian.

 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 kode ini, penghitung untuk bab (h1), bagian (h2), dan subbagian (h3) masing-masing diatur ulang, dan fungsi counters digunakan untuk menggabungkan setiap level.

Ringkasan

Fungsi counters sangat berguna ketika Anda ingin menyesuaikan dan menampilkan beberapa penghitung secara hierarkis. Dengan menggunakan penghitung CSS, Anda dapat dengan bebas menyesuaikan penomoran daftar dan judul, memberikan halaman web struktur informasi yang canggih.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS yang terkait dengan dekorasi model kotakProperti CSS terkait Tabel