list-style-type հատկությունը

list-style-type հատկությունը թույլ է տալիս ul ցանկի համար կետերի փոխարեն օգտագործել քառակուսիներ կամ շրջաններ: ol ցանկի համար սովորական թվերի փոխարեն կարելի է օգտագործել հռոմեական, tառերի տեսքով համարակալում՝ լատինական կամ հունական:

Շարահյուսություն

ընտրիչ {
	list-style-type: արժեք;
}

Արժեքներ ul-ի համար

Արժեք	Նկարագրություն
`circle`	Ստեղծում է մարկերներ շրջանների տեսքով:
`disc`	Ստեղծում է մարկերներ լրացված շրջանների տեսքով:
`square`	Ստեղծում է մարկերներ քառակուսիների տեսքով:
`none`	Հեռացնում է մարկերները:

Լռելյայն արժեքը՝ disc:

Արժեքներ ol-ի համար

Արժեք	Նկարագրություն
`armenian`	Ավանդական հայկական համարակալում:
`decimal`	Արաբական թվեր:
`decimal-leading-zero`	Արաբական թվեր՝ զրոյով դիմացից տասից փոքր թվերի համար:
`georgian`	Ավանդական վրացական համարակալում:
`lower-alpha`	Փոքրատառ լատինական տառեր:
`lower-greek`	Փոքրատառ հունական տառեր:
`lower-latin`	Այս արժեքը նման է lower-alpha-ին:
`lower-roman`	Հռոմեական թվեր փոքրատառով:
`upper-alpha`	Մեծատառ լատինական տառեր:
`upper-latin`	Այս արժեքը նման է upper-alpha-ին:
`upper-roman`	Հռոմեական թվեր մեծատառով:
`none`	Հեռացնում է մարկերները:

Լռելյայն արժեքը՝ decimal:

Օրինակ

<ul>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ul>

ul {
	list-style-type: disc;
}

Օրինակ

<ul>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ul>

ul {
	list-style-type: circle;
}

Օրինակ

<ul>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ul>

ul {
	list-style-type: square;
}

Օրինակ

<ul>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ul>

ul {
	list-style-type: none;
}

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

ol {
	list-style-type: decimal;
}

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

ol {
	list-style-type: armenian;
}

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

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

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

ol {
	list-style-type: georgian;
}

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

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

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

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

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

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

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

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

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

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

Օրինակ

<ol>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ol>

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

Օրինակ

Այս օրինակը ցույց է տալիս, որ color հատկությունը ազդում է ոչ միայն տեքստի գույնի, այլ նաև մարկերների գույնի վրա:

<ul>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
	<li>ցանկի տարր</li>
</ul>

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

Տես նաև

list-style-image հատկությունը,
որը սահմանում է մարկերներ՝ նշված նկարների տեսքով
list-style-position հատկությունը,
որը սահմանում է մարկերների դիրքը
list-style հատկությունը,
որը մարկերների համար կրճատ ձև է