CSS Dersleri
Temel Bilgiler
CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Stilleri
CSS Arkaplanlar
CSS Yazılar
CSS Yazı Tipleri
CSS Bağlantılar
CSS Listeleme
CSS Tablolar

Kenarlıklar
CSS Kutu Modeli
CSS Kenarlıklar (Border)
CSS Dış Kenarlık (Outline)
CSS Dıştan Boşluk (Margin)
CSS İçten Boşluk (Padding)

CSS İleri Düzey
CSS Gruplama ve Üzerine Yazma
CSS Sınırlamalar
CSS Gösterme - Gizleme
CSS Pozisyon Belirleme (position)
CSS Kaydırma (float)
CSS Hizalama (align)
CSS Özel İfadeler (Pseudo)
CSS Transparanlık (opacity)
CSS Çıktı Türleri (media)
CSS Özellik Seçimi (Attribute)
CSS'ye Genel Bakış

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

CSS Listeleme



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

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014