Bu sayfayı okumadan önce, HTMLde öğrendiğimiz listeleme kodlarını birkez gözden geçirmenizi tavsiye ederim. Bu sayfanın konusu listeleme kodlarını CSS ile şekillendirmektir.
Maddeleme İşaretleri
HTMLde 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. CSSde 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.
Kod Alanı: |
<html>
<head>
<title>Resimli maddeleme,</title>
</head>
<body>
<p>CSS Dersleri</p>
<ul style="list-style-image: url(top.gif )">
<li>CSSye Giriş</li>
<li>Metin Formatı</li>
<li>Font Formatı</li>
<li>Arkaplan Formatı</li>
<li>Sınır Çizgisi</li>
<li>Dışkenar Boşluğu</li>
<li>İçkenar Boşluğu</li>
<li>Listeleme</li>
<li>Konumlandırma</li>
<li>Sınıflandırma</li>
</ul>
</body>
</html> |
|
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.
Kod Alanı: |
<html>
<head>
<title>Listeleme Düzeni,</title>
</head>
<body>
<p>list-style-position: Inside</p>
<ul style="list-style-type: square; list-style-position: inside">
<li>Madde1</li>
<li>Madde2</li>
<li>Madde3</li>
</ul>
<p>list-style-position: Outside</p>
<ul style="list-style-type: square; list-style-position: outside">
<li>Madde1</li>
<li>Madde2</li>
<li>Madde3</li>
</ul>
<p>Varsayılan değer</p>
<ul style="list-style-type: square">
<li>Madde1</li>
<li>Madde2</li>
<li>Madde3</li>
</ul>
</body>
</html> |
|
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. |