css list-style nedir? Nasıl kullanılır?

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ı:

css list-style

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ı:

css list-style-type

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ı:

list-style-position

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ı:

liste stiline resim ekleme

İ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…

Leave a Reply