list-style-type xususiyati

list-style-type xususiyati ul ro'yxati uchun nuqta markerlar o'rniga kvadratlar yoki doiralardan foydalanish imkonini beradi. ol ro'yxati uchun oddiy raqamlar o'rniga rim raqamlari, lotin yoki yunon alifbosidagi harflardan foydalanish mumkin.

Sintaksis

selector {
	list-style-type: qiymat;
}

ul uchun qiymatlar

Qiymat	Tavsif
`circle`	Doira shaklidagi markerlarni yaratadi.
`disc`	To'ldirilgan doira shaklidagi markerlarni yaratadi.
`square`	Kvadrat shaklidagi markerlarni yaratadi.
`none`	Markerlarni olib tashlaydi.

Standart qiymat: disc.

ol uchun qiymatlar

Qiymat	Tavsif
`armenian`	An'anaviy arman raqamlari.
`decimal`	Arab raqamlari.
`decimal-leading-zero`	O'ndan kichik raqamlar uchun oldida nol bilan arab raqamlari.
`georgian`	An'anaviy gruzin raqamlari.
`lower-alpha`	Kichik lotin harflari.
`lower-greek`	Kichik yunon harflari.
`lower-latin`	Bu qiymat lower-alpha ga o'xshaydi.
`lower-roman`	Kichik rim raqamlari.
`upper-alpha`	Katta lotin harflari.
`upper-latin`	Bu qiymat upper-alpha ga o'xshaydi.
`upper-roman`	Katta rim raqamlari.
`none`	Markerlarni olib tashlaydi.

Standart qiymat: decimal.

Misol

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

ul {
	list-style-type: disc;
}

Misol

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

ul {
	list-style-type: circle;
}

Misol

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

ul {
	list-style-type: square;
}

Misol

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

ul {
	list-style-type: none;
}

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

ol {
	list-style-type: decimal;
}

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

ol {
	list-style-type: armenian;
}

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

ol {
	list-style-type: georgian;
}

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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

Misol

<ol>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ol>

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

Misol

Bu misol color xususiyati nafaqat matn rangiga, balki markerlarning rangiga ham ta'sir qilishini ko'rsatadi:

<ul>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
	<li>ro'yxat elementi</li>
</ul>

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

Shuningdek qarang

list-style-image xususiyati,
bu belgilangan rasmlardan markerlarni o'rnatadi
list-style-position xususiyati,
bu markerlarning pozitsiyasini belgilaydi
list-style xususiyati,
bu markerlar uchun qisqartma hisoblanadi