ListeLeMe.htm
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.
Yardım İçin Sadece Bir Tık Yeter
 
Sponsor
 
.tk
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol