CSS Listeleri

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: Listeleme Şekli Tipi

Bir listenin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işaretleri kare (square) olacaktır:

   ul { list-style-type: square; }

Aşağıdaki şekilde görünecektir:

HTML Görünümü
Listeleme Şekilleri

  • Maddelenmiş Liste
  • Numaralanmış Liste

UL (maddeli) ve OL (numaralı) listelerde farklı farklı stiller kullanılabilir.

Örneğin numaralı listemizdeki numaraların roma rakamı olmasını istiyorsak:

   ol.a { list-style-type: upper-roman; }

Alfabedeki küçük harflerin listelenmesini istiyorsak:

   ol.b { list-style-type: lower-alpha; }

İçi boş daireleri madde imi yapmak istiyorsak:

   ul.c { list-style-type: circle; }

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.

   ul { list-style-image: url('madde.gif'); }

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

list-style-position: Madde İmi Nerede Olacak?

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

   ul { list-style-position: inside; }

Bu durumda madde.gif 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:

   ul { list-style: square url("madde.gif"); }

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