CSS’de Listeler

Listelerde kullandığımız madde imlerini biçimlendirirken CSS'den faydalanabiliriz.

CSS üç bakımdan işimize yarar:

  • Sıralı listelerdeki numaraların görünüşünü değiştirebiliriz.
  • Maddelenmiş listelerdeki imlerin şekillerini değiştirebiliriz.
  • Madde imi yerine belirlediğimiz bir resim kullanabiliriz.

Listelerde biçimlendirme yaparken sıklıkla kullanılan komutlar:

  • list-style-type
  • list-style-image
  • list-style-position
  • list-style

list-style-type: Listeleme Şekli Tipi

Bir listenin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işareti türleri bulunmaktadır:


“list-style-type” Kullanımı

ul.a {
    list-style-type: circle; /* İçi Boş Daire */
}

ul.b {
    list-style-type: square; /* Kare */
}

ol.c {
    list-style-type: upper-roman; /* Romen Rakamları*/
}

ol.d {
    list-style-type: lower-alpha; /* Alfabetik Sıralı */
}
  
ol.e {
    list-style-type: none; /* Madde işaretini kaldırır */
}

Görüldüğü gibi birçok şekli var. Kullanabileceklerinizin tamamı:

OL (numaralı liste) için: armenian, decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, none (boş bırak), upper-alpha, upper-latin, upper-roman.

UL (maddeli liste) için: circle (içi boş yuvarlak), disc (yuvarlak), square (kare), none (boş bırakır – göstermez).

list-style-image: Madde İşareti Yerine Resim Kullanmak

Küçük bir resim belirterek onun madde imi yerine kullanılmasını sağlayabiliriz.


“list-style-image” Kullanımı

   ul { list-style-image: url(madde-isareti.png); }

Bu durumda madde-isareti.png resmi her maddenin başında kullanılacak madde imimiz olacaktır.

list-style-position: Madde İmi Konumlandırmak

Madde iminin maddenin içinde mi dışında mı olacağını belirtir. inside içinde, outside dışında olacak demektir.


“list-style-position” Kullanımı

   ul { list-style-position: inside; }

Bu durumda madde-isareti.png resmi her maddenin başında kullanılacak madde imimiz olacaktır.

list-style: Kısa Yoldan Kullanım

Yukarıda belirtilen tüm özellikleri tek bir kod ile de kullanabiliriz. Aşağıdaki örneğe bakalım:


“list-style” Kullanımı

   ul { list-style: square url(madde-isareti.png); }

Örneğe bakılırsa madde imimiz kare biçimli olacak ve üzerine madde-isareti.png işlenecektir. Yani önce list-style-type belirttik sonra list-style-image belirttik.