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>



<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.
EğitimCSScss listelemecss nedir
CSS Dersleri

Ara

Eğitim


Konular

Tags

Hanci.org sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.
Hanci.org sitesini kullanarak çerez politikamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.