Properti list-style-type
Properti list-style-type memungkinkan
untuk daftar ul
alih-alih penanda titik menjadi kotak atau
lingkaran. Untuk daftar ol
alih-alih angka biasa dapat dibuat angka Romawi,
penomoran dalam bentuk huruf: Latin atau Yunani.
Sintaksis
selektor {
list-style-type: nilai;
}
Nilai untuk ul
| Nilai | Keterangan |
|---|---|
circle |
Membuat penanda berupa lingkaran. |
disc |
Membuat penanda berupa lingkaran terisi. |
square |
Membuat penanda berupa kotak kecil. |
none |
Menghilangkan penanda. |
Nilai default: disc.
Nilai untuk ol
| Nilai | Keterangan |
|---|---|
armenian |
Penomoran Armenia tradisional. |
decimal |
Angka Arab. |
decimal-leading-zero |
Angka Arab dengan nol di depan untuk angka kurang dari sepuluh. |
georgian |
Penomoran Georgia tradisional. |
lower-alpha |
Huruf Latin kecil. |
lower-greek |
Huruf Yunani kecil. |
lower-latin |
Nilai ini analog dengan lower-alpha. |
lower-roman |
Angka Romawi dalam huruf kecil. |
upper-alpha |
Huruf Latin kapital. |
upper-latin |
Nilai ini analog dengan upper-alpha. |
upper-roman |
Angka Romawi dalam huruf kapital. |
none |
Menghilangkan penanda. |
Nilai default: decimal.
Contoh
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: disc;
}
:
Contoh
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: circle;
}
:
Contoh
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: square;
}
:
Contoh
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: none;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: decimal;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: armenian;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: decimal-leading-zero;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: georgian;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-alpha;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-greek;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-latin;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-roman;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: upper-alpha;
}
:
Contoh
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: upper-roman;
}
:
Contoh
Contoh ini menunjukkan bahwa properti color
mempengaruhi tidak hanya warna teks, tetapi juga
warna penanda:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: disc;
color: red;
}
:
Lihat juga
-
properti
list-style-image,
yang mengatur penanda berupa gambar yang ditentukan -
properti
list-style-position,
yang mengatur posisi penanda -
properti
list-style,
yang merupakan singkatan untuk penanda