$1.99 Domains* at GoDaddy.com

CSS Listeleme

css-1

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.

 

<html>

<head>

<title>Resimli maddeleme,</title> 

</head>

<body>

<p>CSS Dersleri</p>

<ul style=”list-style-image: url(top.gif)”>

<li>CSS’ye 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.

 

<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.

Kategoriler: CSS, Web Programlama

Tags: , , , ,

Yorumlar

Yorum Yok

Yorumunuzu Ekleyin

Yorum eklemek için giris yapmalısınız.