Css Liste Özellikleri ve Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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.

1 – list-style-type : 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

2 – list-style-image : 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

3 – list-style-position : 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,

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 10 – Font Özellikleri ve Kullanımı

Sonraki : Css Dersleri 12 – Tablo Özellikleri ve Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +