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

1.589 kez okundu

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.

wordle-css

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

 

 

 

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.

Tipobe365 Giriş