CSS Serisi – 3) CSS Örnekleri 1.5 Listeleme İşlemleri

Merhaba arkadaşlar, CSS Tanımını, Kullanımını ve CSS Örneklerini paylaşacağım “CSS Serisi” makalelerine “CSS Örnekleri” ile devam ediyoruz. “CSS Nedir?” diye merak eden arkadaşlar ilk yazıyı, “CSS Kullanımını” öğrenmek isteyen arkadaşlar da ikinci yazıyı inceleyebilirler. CSS Listeleme İşlemleri CSS kullanarak, listeleme işlemi yaparken kullandığımız madde işaretlerini biçimlendirebiliriz.

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

list-style-type: Listeleme Şekli Tipi

Listemizin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işaretleri kare (square) olacaktır. ul { list-style-type: square; } Ekran Çıktısı : 

• Liste öğresi 1
• Liste öğesi 2

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 İşaretinin Yerini Belirlemek

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"); } Evet arkadaşlar bu yazımda sizlere “CSS ile Listeleme Örnekleri” hakkında bilgi vermeye çalıştım. Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler. Kaynak: CSS.sitesi.web.tr