TIKLA
  • Anasayfa
  • Favorilere Ekle
  • Site Haritası
  • https://www.facebook.com/edkirtasiye?ref=hl
  • https://plus.google.com/b/106886206509708574199/106886206509708574199/posts
  • https://twitter.com/egitimdunyamiz
Ziyaret Bilgileri
Aktif Ziyaretçi3
Bugün Toplam35
Toplam Ziyaret1364383
ANKET
Sizce Eğitim Sisteminin En Büyük Eksikliği Nedir?
Site Haritası
REKLAM4
reklam5
REKLAM2
REKLAM1
REKLAM

CSS Listeleri

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.
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 { list-style-type: square; }

   

Aşağıdaki şekilde görünecektir:

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:

   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 İ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.

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.
Yorumlar - Yorum Yaz


 TIKLA