Ciri list-style-type

Ciri list-style-type membolehkan untuk senarai ul menggantikan penanda titik dengan segi empat sama atau bulatan. Untuk senarai ol selain nombor biasa, anda boleh menggunakan nombor Rumi, penomboran dalam bentuk huruf: Latin atau Greek.

Sintaks

pemilih {
	list-style-type: nilai;
}

Nilai untuk ul

Nilai	Penerangan
`circle`	Menghasilkan penanda dalam bentuk bulatan.
`disc`	Menghasilkan penanda dalam bentuk bulatan berisi.
`square`	Menghasilkan penanda dalam bentuk segi empat kecil.
`none`	Membuang penanda.

Nilai lalai: disc.

Nilai untuk ol

Nilai	Penerangan
`armenian`	Penomboran Armenia tradisional.
`decimal`	Nombor Arab.
`decimal-leading-zero`	Nombor Arab dengan sifar di depan untuk digit kurang daripada sepuluh.
`georgian`	Penomboran Georgia tradisional.
`lower-alpha`	Huruf Latin kecil.
`lower-greek`	Huruf Greek kecil.
`lower-latin`	Nilai ini serupa dengan lower-alpha.
`lower-roman`	Nombor Rumi dalam huruf kecil.
`upper-alpha`	Huruf Latin besar.
`upper-latin`	Nilai ini serupa dengan upper-alpha.
`upper-roman`	Nombor Rumi dalam huruf besar.
`none`	Membuang penanda.

Nilai lalai: decimal.

Contoh

<ul>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ul>

ul {
	list-style-type: disc;
}

Contoh

<ul>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ul>

ul {
	list-style-type: circle;
}

Contoh

<ul>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ul>

ul {
	list-style-type: square;
}

Contoh

<ul>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ul>

ul {
	list-style-type: none;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: decimal;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: armenian;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: georgian;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: lower-greek;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: lower-latin;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: lower-roman;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

Contoh

<ol>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ol>

ol {
	list-style-type: upper-roman;
}

Contoh

Contoh ini menunjukkan bahawa ciri color mempengaruhi bukan sahaja warna teks, tetapi juga warna penanda:

<ul>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
	<li>item senarai</li>
</ul>

ul {
	list-style-type: disc;
	color: red;
}

Lihat juga

ciri list-style-image,
yang menetapkan penanda dalam bentuk gambar yang ditentukan
ciri list-style-position,
yang menetapkan posisi penanda
ciri list-style,
yang merupakan singkatan untuk penanda