CSS Ders 9 (Listeleme)

Listeleme de kullandığımız madde imlerini CSS ile biçimlendirebiliriz. CSS üç yönden işimizi kulaylaştırır:

• 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 (Birleştirilmiş)

1. 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; }

     Önizleme :
     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).
2. 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.
3. 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.
4. 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.

İlgili Konular

0 Yorum