CSS de Listeleme

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>

CSS Dersleri
<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>

list-style-position: Inside
<ul style="list-style-type: square; list-style-position: inside">
<li>Madde1</li>
<li>Madde2</li>
<li>Madde3</li>
</ul>

list-style-position: Outside
<ul style="list-style-type: square; list-style-position: outside">
<li>Madde1</li>
<li>Madde2</li>
<li>Madde3</li>
</ul>

Varsayılan değer
<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.

Favorilerine al ya da arkadaşlarınla paylaş: