CSS list-style Kullanımı

CSS "list-style" özelliği, bir liste içindeki maddelerin nasıl görüntüleneceğini belirlemek içindir. Bu özellik, "list-style-type", "list-style-position" ve "list-style-image" özellikleri ile birlikte kullanılır.

"list-style-type" özelliği ile liste maddelerinin nasıl görüntüleneceğini belirleyebilirsiniz. Örneğin, bir liste maddelerinin işaretlenmiş olarak görüntülenmesini istiyorsanız, aşağıdaki kodu kullanabilirsiniz:

ul {
    list-style-type: disc;
}

Bu kodda, "ul" etiketi için tanımlanmış olan listelerin maddeleri işaretli olarak görüntülenecektir.

"list-style-position" özelliği ile liste maddelerinin işaretin yerleşimini belirleyebilirsiniz. Aşağıdaki örnekte, bir liste maddelerinin işaretinin metnin içinde yer alması gösterilmektedir.

ol {
    list-style-position: inside;
}

Bu kodda, "ol" etiketi için tanımlanmış olan listelerin maddeleri işaretinin metnin içinde görüntülenecektir.

"list-style-image" özelliği ile liste maddelerinin işaretinin görsel olarak nasıl görüntüleneceğini belirleyebilirsiniz. Örneğin, bir liste maddelerinin işaretinin bir resim olarak görüntülenmesini istiyorsanız, aşağıdaki kodu kullanabilirsiniz:

li {
    list-style-image: url('bullet.png');
}

Bu kodda, "li" etiketi için tanımlanmış olan liste maddeleri işareti olarak "bullet.png" adlı resim görüntülenecektir.

"list-style" özelliği ile, tüm özellikleri tek bir kod içinde yazabilirsiniz. Bununla ilgili bir örnek yapalım...

ul {
    list-style: square inside url('bullet.png');
}

Bu kodda, "ul" etiketi için tanımlanmış olan listelerin maddeleri kare şeklinde işaretli, işaretin metnin içinde ve "bullet.png" adlı resim kullanılarak görüntülenecektir.

Sonuç olarak "list-style" özelliği, liste maddelerinin nasıl görüntüleneceğini kolayca değiştirmenizi ve web sayfanızda daha düzenli ve estetik bir görünüm elde etmenizi sağlar. Bu özellik sadece liste maddelerinde kullanılır ve liste içindeki metnin renk veya boyut gibi değiştirmek için "color" veya "font-size" gibi diğer özellikleri kullanmanız gerekir.


CSS

İlginizi Çekebilir

CSS align-items Kullanımı

CSS white-space Kullanımı

CSS justify-items Kullanımı

CSS grid-row-gap Kullanımı

CSS flex-shrink Kullanımı