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