css list-style özelliği, liste madde işaretçisinin özelliklerini belirlemek için kullanırız. Liste elemanlarının başında olan işaretlerin özelliklerini değiştirmek için kullanılır.
Aldığı parametreler :
list-style-type : liste madde işaretçisinin şeklini belirleriz.
list-style-position : liste madde işaretçisinin konumunu belirler.
list-style-image : liste madde işaretçisine resim ekler.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul {
width: 150px;
list-style : square;
border: 1px solid black;
}
.one { list-style : url(select.png) inside;}
.two { list-style : lower-roman inside;}
.three { list-style : circle outside url(select.png);}
.four { list-style : none;}
.five { list-style : circle;}
.five-child { list-style : inherit; width: 100px;}
.six { list-style : initial;}
</style>
<body>
<ul class="one">
<li> Html </li>
<li> CSS </li>
<li> JS </li>
</ul>
<ul class="two">
<li> Html </li>
<li> CSS </li>
<li> JS </li>
</ul>
<ul class="three">
<li> Html </li>
<li> CSS </li>
<li> JS </li>
</ul>
<ul class="four">
<li> Html </li>
<li> CSS </li>
<li> JS </li>
</ul>
<ul class="five">
<li> Html </li>
<li> CSS </li>
<ul class="five-child">
<li>Bootstrap</li>
<li>Material</li>
</ul>
<li> JS </li>
</ul>
<ul class="six">
<li> Html </li>
<li> CSS </li>
<li> JS </li>
</ul>
</body>
</html>
Html Çıktısı:

Yukarıdaki örnek görüldüğü gibi list-style ile listelerin özelliklerini değiştirebiliyoruz. Ama istersek bu özellikleri ayrı ayrı değiştirebiliriz. Şimdi bunları hangi özellikler ile yapacağız bakalım.
css list-style-type nedir?
list-style-type, liste madde işaretçisinin şeklini belirlemek için kullanılır.
Aldığı parametreler :
disc : Daire
circle : Çember.
square : Kare
decimal : Sayı
decimal-leading-zero : Sayı (Tek haneli sayılarda başa sıfır ekler)
lower-alpha : Küçük harf
upper-alpha : Büyük harf
lower-roman : Küçük harf roma rakamı
upper-roman : Büyük harf roma rakamı
none : Değer yok
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul{
list-style-type: square;
}
.one { list-style-type: disc;}
.two { list-style-type: circle;}
.three { list-style-type: upper-alpha;}
.four { list-style-type: lower-roman;}
.five { list-style-type: none;}
</style>
<body>
<ul class="one">
<li> Html </li>
<li> CSS </li>
</ul>
<ul class="two">
<li> Html </li>
<li> CSS </li>
</ul>
<ul class="three">
<li> Html </li>
<li> CSS </li>
</ul>
<ul class="four">
<li> Html </li>
<li> CSS </li>
</ul>
<ul class="five">
<li> Html </li>
<li> CSS </li>
</ul>
</body>
</html>
Html Çıktısı:

list-style-position nedir?
list-style-position, liste madde işaretçisinin içerik alanındaki konumunu belirlemek için kullanırız.
Aldığı parametreler :
outside : içerik alanı dışında
inside : içerik alanı içinde
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul{ list-style-position: inside; }
.one { list-style-position: outside;}
.two { list-style-position: inside;}
.three {list-style-position: initial; }
</style>
<body>
<ul class="one">
<li> Html </li>
<li> CSS </li>
</ul>
<ul class="two">
<li> Html </li>
<li> CSS </li>
</ul>
<ul class="three">
<li> Html </li>
<li> CSS </li>
</ul>
</body>
</html>
Html Çıktısı:

css list-style-image Kullanımı
list-style-image, liste elemanı madde işaretçisine resim eklemek için kullanırız.
Aldığı parametreler :
url : Eklenecek resmin adresi
none : Değer yok
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.one { list-style-image: url(select.png);}
.two { list-style-image: none;}
</style>
<body>
<ul class="one">
<li> Html </li>
<li> CSS </li>
</ul>
<ul class="two">
<li> Html </li>
<li> CSS </li>
</ul>
</body>
</html>
Html Çıktısı:

İstersek list-style kullanarak bütün özellikleri verilebilir ama istersek de list-style-type, list-style-position, list-style-image özelliklerine ayrı değer vererek aynı işlemi yapabiliriz. Artık bunu sizin tercihinize bırakıyorum. Ama ne kadar az kod yazarsak daha iyi olacağı için list-style ile daha az kod yazmayı tercih etmek güzel olur.
Başka bir yazımızda görüşmek üzere…