list-style-type ගුණය

list-style-type ගුණය ul ලැයිස්තුවක් සඳහා බින්දු මාර්කර වෙනුවට චතුරස්ර හෝ වෘත්ත සෑදීමට ඉඩ සලසයි. ol ලැයිස්තුවක් සඳහා සාමාන්ය ඉලක්කම් වෙනුවට රෝම, අක්ෂර වලින් සංඛ්‍යාංකනය: ලතින් හෝ ග්‍රීක.

වාක්‍ය රචනය

තෝරන්නා {
	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 ගුණය,
මාර්කර සඳහා කෙටි යෙදුමකි