Listeleme
CSS DERSLERİ
 |
 |
Ders 8: Listeleme
Bu sayfayı okumadan önce, HTML'de öğrendiğimiz listeleme kodlarını birkez gözden geçirmenizi tavsiye ederim. Bu sayfanın konusu listeleme kodlarını CSS ile şekillendirmektir.
Maddeleme İşaretleri
HTML'de anlatıldığı üzere, iki tür listeleme vardır: sıralı listeleme, sırasız listeleme. Sıralı listelemeyi type="..." parametresine "1", "a", "A", "I", "i" gibi değerler vererek şekillendiriyorduk. Aynı şekilde sırasız listelemeyi type="..." parametresine "disc", "circle", "square" gibi değerlerle şekillendiriyorduk. CSS'de type="..." parametresinin işlevini list-style-type özelliği üstlenmiştir. Bu özelliğin aldığı özellikler de aşağı yukarı aynı:
| none | Maddelerin önüne işaret koymaz. |
| list-style-type: none | |
| disc | Maddelerin önüne disk şeklinde işaret koyar. |
| list-style-type: disc | |
| circle | Maddelerin önüne çember şeklinde işaret koyar. |
| list-style-type: circle | |
| square | Maddelerin önüne kare şeklinde işaret koyar. |
| list-style-type: square | |
| decimal | Maddelerin önüne sıralı rakam koyar koyar. (1, 2, 3, 4, 5...) |
| list-style-type: decimal | |
| decimal | Maddelerin önüne sıralı rakam koyar. (1, 2, 3, 4, 5...) |
| list-style-type: lower-roman | |
| decimal | Maddelerin önüne sıralı küçük roma rakamı koyar. (i, ii, iii, iv, v...) |
| list-style-type: lower-roman | |
| upper-roman | Maddelerin önüne sıralı büyük roma rakamı koyar. (I, II, III, IV, V...) |
| list-style-type: upper-roman | |
| lower-alpha | Maddelerin önüne sıralı küçük harf koyar. (a, b, c, d, e...) |
| list-style-type: lower-alpha | |
| upper-alpha | Maddelerin önüne sıralı büyük harf koyar. (A, B, C, D, E...) |
| list-style-type: upper-alpha |
Bu özellikleri sadece ol, ul ve li kodlarına atayabiliyoruz. (Çünkü diğerleri sıralama kodu değil.)
Resim Nesnelerini Maddeleme İşareti Yapma
Tabi maddelerin önüne sadece bu işaretleri koymakla veya hiçbir şey koymamakla sınırlandırılmış değiliz. list-style-image özelliğine url(...) adres değeri vererek, maddelerin önüne dosya adresi verilen görüntü elemanının gelmesini sağlayabiliriz: list-style-image: url(ok.gif) gibi.
Listeleme Boşluğu
ol, ul gibi listeleme kodlarında, listelenen maddeler sayfanın solunda belli bir mesafe bırakmaktadır. Bu mesafeyi artırmanın yolu list-style-position özelliğine inside değeri vermektir. outside değerini verirsek, maddeler sayfa solunda eskisi kadar boşluk bırakacaktır. Bana inanmıyorsanız, aşağıdaki örneğe inanın. Not: Netscape gözatıcısı bu özelliği desteklemiyor.
Listeleme Özelliklerini Tek Kodla İfade Etme
Şimdi bu özelliklerin hepsini taşıyan, klasik ders sonu özelliğimize geçelim: list-style. Bu özellik şöyle ifade edilir: list-style: (list-style-type değeri) (list-style-position değeri) veya list-style: (list-style-position değeri) (list-style-image değeri). Not: Bu özelliği Netscape gözatıcıları desteklemiyor.
