CSS List Özelliği

Bu makalemizde web sayfalarında sıkça kullanılan ve hatta hemen hemen bütün yazılarımda da kullandığım listeler hakkında olacak.CSS Liste paramaretleri nelerdir, nasıl kullanılır gibi sorulara cevap vereceğim.Konu kısa ve kolay, hadi başlayalım.

CSS Liste Özellikleri

HTML tarafında bilgidiğiniz gibi liste oluşturmak için ul veya ol etiketlerimizi kullanıyoruz.ul etiketi
sırasız bir liste oluşturuken, ol etiketi sıralı liste oluşturmaya yarar.

CSS tarafında ise bu liste elementlerini şekillendirmek için 3 tane list özelliği ve bir tane de kısaltımış özellik bulunuyor.

Not: Listelere hemen hemen CSS de bulunan bütün özelliklerle stil tanımlaması yapabilirsiniz.Burada list özellikleri sadece listelere özel  kullanılan bir durum.

  • list-style-type
  • list-style-postion
  • list-style-image
  • list-style

List-style-type

Liste elemanlarını diğer metin içeriklerinden ayırmak için liste elemanların soluna özel işaretler oluşturmamızı list-style-type özelliği sağlıyor.Aslında tarayıcılar varsayılan olarak bu özelliği kullanıyor.Normalde sizin bir şey yapmanıza gerek yok ama eğer işareti kaldırmak istiyor ya da farklı bir işaret koymak istiyorsanız kullanabilirsiniz.

Örnek Kullanım:

List-style-position

Bu özellikte tarayıcılar tarafından varsayılan olarak geliyor.Listelerde farketmişsinizdir normal yazılara göre içeri girinti bulunuyor.Bu girintiyi kaldırmak yada yoksa eklemek için list-style-position özelliği kullanılır.İki tane değer alır.

Örnek Kullanım:

List-style-image

Liste elemanlarının solunda bulunan işaretleri beğenmediyseniz, tanımlı değerler yerine kendiniz görüntü ekleyebilirisiz.Yazılarımda gördüğünüz gibi farklı tipte liste işareti yapmak için list-style-image özelliğini kullanıyoruz.

Örnek Kullanım:

List-style – Kısaltılmış Özellik

Yukarıda bahsettiğim 3 özelliği tek bir list-style özelliği içerisinde kullanabilirsiniz.Bu tür kullanıma yabancı değilsiniz.

Örnek Kullanımı:

Son olarak:

Yazının başında da belirttiğim gibi liste özellikleri çok kısa bir konu.Yazı da list özellikleri olan list-style-type, list-style-positon ve list-style-image özelliklerinin ne işe yaradığı anlatılmış ve örnek kullanımları gösterilmiştir.Ayrıca list-style kısaltılmış özelliğinin de nasıl kullanıldığı bir örnekle gösterilmiştir.

Bütün CSS Dersleri için tıklayın

Kaynak
css-tricks
w3schools

Bunları da beğenebilirsin