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ş)
- list-style-type: Listeleme Şekli Tipi
Bir listenin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işaretleri kare (square) olacaktır:
UL (maddeli) ve OL (numaralı) listelerde farklı farklı stiller kullanılabilir.
Örneğin numaralı listemizdeki numaraların roma rakamı olmasını istiyorsak:
Alfabedeki küçük harflerin listelenmesini istiyorsak:
İçi boş daireleri madde imi yapmak istiyorsak:
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-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.
- 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:
İlgili Konular
0
Yorum