CSS Listeleme
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.
- list-style-type
- list-style-image
- list-style-position
- list-style (Birleştirilmiş)
list-style-type: Listeleme Şekli Tipi
Bir listenin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işaretleri kare (square) olacaktır:CSS Kodu
ul { list-style-type: square; }
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:
CSS Kodu
ol.a { list-style-type: upper-roman; }
CSS Kodu
ol.b { list-style-type: lower-alpha; }
CSS Kodu
ul.c { list-style-type: circle; }
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).
Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.
Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.
Ö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.
list-style-image: Madde İşareti Yerine Resim Kullanmak
Küçük bir resim belirterek onun madde imi yerine kullanılmasını sağlayabiliriz.CSS Kodu
ul { list-style-image: url('madde.gif'); }
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.CSS Kodu
ul { list-style-position: inside; }
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:CSS Kodu
ul { list-style: square url("madde.gif"); }