list-style-type Özelliği

list-style-type özelliği, ul listesi için nokta şeklindeki işaretleyiciler yerine kareler veya daireler yapmaya izin verir. ol listesi için normal rakamlar yerine Romen rakamları, harf şeklinde numaralandırma: Latin veya Yunan harfleri yapılabilir.

Sözdizimi

seçici {
	list-style-type: değer;
}

ul için Değerler

Değer	Açıklama
`circle`	Çember şeklinde işaretleyiciler oluşturur.
`disc`	İçi dolu daire şeklinde işaretleyiciler oluşturur.
`square`	Küçük kareler şeklinde işaretleyiciler oluşturur.
`none`	İşaretleyicileri kaldırır.

Varsayılan değer: disc.

ol için Değerler

Değer	Açıklama
`armenian`	Geleneksel Ermeni numaralandırması.
`decimal`	Arap rakamları.
`decimal-leading-zero`	Ondan küçük rakamlar için önünde sıfır bulunan Arap rakamları.
`georgian`	Geleneksel Gürcü numaralandırması.
`lower-alpha`	Küçük harf Latin harfleri.
`lower-greek`	Küçük harf Yunan harfleri.
`lower-latin`	Bu değer lower-alpha ile aynıdır.
`lower-roman`	Küçük harf Romen rakamları.
`upper-alpha`	Büyük harf Latin harfleri.
`upper-latin`	Bu değer upper-alpha ile aynıdır.
`upper-roman`	Büyük harf Romen rakamları.
`none`	İşaretleyicileri kaldırır.

Varsayılan değer: decimal.

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

<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;
}

Örnek

Bu örnek, color özelliğinin sadece metin rengini değil, aynı zamanda işaretleyicilerin rengini de etkilediğini gösterir:

<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;
}

Ayrıca Bakınız

list-style-image özelliği,
işaretleyicileri belirlenmiş resimler şeklinde ayarlar
list-style-position özelliği,
işaretleyicilerin konumunu ayarlar
list-style özelliği,
işaretleyiciler için kısa yazım şeklidir