Css Liste Özellikleri ve Kullanımı

Bu yazımızda Css’te liste özelliklerini ve bunları nasıl kullanabileceğimizi öğreneceğiz. Liste özellikleri ile listenin başındaki işaretleri değiştirebilir, işaretler yerine resim ekleyebilir ve bu işaretlerin pozisyonunu değiştirebiliriz.

Şimdi tek tek bu özellikleri uygulamalı bir şekilde inceleyelim.

CSS LİST STYLE TYPE ÖZELLİĞİ

Bu özellik ile listelerin başındaki işaretler değiştirilebilir veya tamamen kaldırılabilir.

list-style-type birçok değer alabilir ama örnek olması adına burda 4 değeri göstereceğim. Siz diğer değerleride uygulayarak inceleyebilirsiniz.

Örneğimizde 4 adet sırasız liste tanımlayıp, list-style-type değerleri ile tarayıcıdaki durumlarını inceleyelim.

css-dersleri-list-style-type-kullanimi

CSS LİST STYLE İMAGE ÖZELLİĞİ

Bu özellik ile listelerin başlarındaki işaretler yerine resimler kullanabiliriz. Yapmamız gereken list-style-image özelliğine resmin yolunu tanımlamak.

Örneğimizde bir sırasız liste tanımlayıp, list-style-image değerlerine resmimizi vererek tarayıcıdaki durumunu inceleyelim.

css-dersleri-list-style-image-kullanimi

CSS LİST STYLE POSİTİON ÖZELLİĞİ

Bu özellik ile listelerin başlarındaki işaretlerin pozisyonlarını belirleyebiliriz.

list-style-position özelliğine şu değerleri verebiliriz;

      ► inside

      ► outside

Örneğimizde 2 adet sırasız liste tanımlayıp, list-style-position değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-list-style-position-kullanimi

Son olarak şunu da ekleyelim.

Burda bahsettiğimiz 3 özelliği ayrı ayrı tanımlamak yerine tek seferde list-style özelliği ile tanımlayabiliriz.

Örneğin,

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply