Css Listeler

Css listeler ile Html listeleme dersinde öğrenmiş olduğunuz listeleme etiketlerine stil vermek için kullanılmaktadır. Css listeler :

  • Sıralı Listeler 
  • Sırasız Listeler
  • Resimli Madde İmi Listeler

Css Sıralı Liste

Css sıralı listelere stil vermek için list-style-type özelliği kullanılmaktadır. List-style-type özelliğinin alabildiği değerler:

  • decimal : Rakam ile başlayan listeleme normal numaralandırma işlemi yapar.
  • decimal-leading-zero : Sayının önüne sıfır alarak artan listeleme . (01, 02, 03, 04, 05 vb.)
  • lower-alpha : Küçük harfle başlayan sıralı listeleme (a, b, c vb.)
  • upper-alpha : Büyük harfle başlayan sıralı liste (A, B, C vb.)
  • lower-latin : Küçük harfle başlayan latin alfabesi lover-alpha ile aynı işlemi yapar.
  • upper-latin : Büyük harfle başlayan sıralı liste (A, B, C vb.)
  • lower-roman : Küçük roma rakamı ile başlayan liste (i, ii, iii vb.)
  • upper-roman : Büyük roma rakamı ile başlayan sıralı liste (I, II, III vb.)

Css Sıralı Liste Kullanımı

<style type="text/css">

ol{
   list-style-type: siralı_liste_icin_değer;

}

</style>

Örnek 1:

<style type="text/css">

ol{
   list-style-type: decimal;

}

</style>

Kodu Çalıştır

Örnek 2:

<style type="text/css">

ol{
   list-style-type: decimal-leading-zero;

}

</style>

Kodu Çalıştır

Örnek 3:

<style type="text/css">

ol{
   list-style-type: lower-alpha;

}

</style>

Kodu Çalıştır

Örnek 4:

<style type="text/css">

ol{
   list-style-type: upper-alpha;

}

</style>

Kodu Çalıştır

Örnek 5:

<style type="text/css">

ol{
   list-style-type: lower-latin;

}

</style>

Kodu Çalıştır

Örnek 6:

<style type="text/css">

ol{
   list-style-type: upper-latin;

}

</style>

Kodu Çalıştır

Örnek 7:

<style type="text/css">

ol{
   list-style-type: lower-roman;

}

</style>

Kodu Çalıştır

Örnek 8:

<style type="text/css">

ol{
   list-style-type: upper-roman;

}

</style>

Kodu Çalıştır

 

Css Sırasız Liste

Css sıralı listelere stil vermek için sıralı listelerde olduğu gibi list-style-type özelliği kullanılmaktadır. Sırasız listelerde List-style-type özelliğinin alabildiği değerler:

  • none : Madde imini kaldırmak için kullanılır.
  • disc : İçi dolu daire varsayılan değerdir.
  • circle : İçi boş daire madde imi 
  • square :İçi dolu kare madde imi

Css Sırasız Liste Kullanımı

<style type="text/css">

ul{
   list-style-type: sırasız_liste_icin_değer;

}

</style>

Örnek 1:

<style type="text/css">

ul{
   list-style-type: none;

}

</style>

Kodu Çalıştır

Örnek 2:

<style type="text/css">

ul{
   list-style-type: disc;

}

</style>

Kodu Çalıştır

Örnek 3:

<style type="text/css">

ul{
   list-style-type: circle;

}

</style>

Kodu Çalıştır

Örnek 4:

<style type="text/css">

ul{
   list-style-type: square;

}

</style>

Kodu Çalıştır

 

Css Resimli Madde İmi

Css dilinde resimli madde imi ile liste oluşturmak için list-style-image özelliği kullanılmaktadır. İstediğimiz bir resmi madde imi olarak kullanabilmekteyiz. Boyutları ayarlandığında güzel bir görüntü oluşturmaktadır. Örneğin: Genişliği ve yüksekliği 10 pixel olan resim ekleyebilirsiniz.

Css Resimli Madde İmi Kullanımı

<style type="text/css">

ol{
   list-style-image: url("resim_adresi");

}

</style>

Örnek :


<html>

<head>
<title> Resimli madde imi liste css</title>

<style type="text/css">

.resimlimaddeimi{

	list-style-image: url("maddeimi.png");

}

</style>

</head>

<body>

<ol class="resimlimaddeimi">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
<li>Madde 5</li>	
</ol>

</body>

</html>

Kodu Çalıştır

Önceki Ders: Css Tablolar Sonraki Ders: Css Konumlandırma