CSS Listeleme özellikleri aşağıdaki maddeleri sağlar;

• Sıralı listeler için Farklı liste öğesi şeklinde gösterim
• Sırasız listeler için farklı listeleme öğeleri
• Listeleme işlemini küçük resimlerle gösterebilme

Liste

Listeleme işlemi HTML içerisinde iki ayrı biçimde kullanılır:

• Sırasız listeler – liste öğeleri mermi ile işaretlenir
• Sıralı  listeler – liste öğeleri sayı veya harf ile işaretlenir

CSS ile bu listeleme işini mermi yada sayıların dışında dilediğimiz bir resmi de girebiliriz.

Farklı Listeleme İşaretleyicileri

Aşağıda vereceğim örnekte işaretleyicilerin nasıl kullanılacağına dair kodlar mevcuttur;

ul.a {list-style-type: circle;}
 ul.b {list-style-type: square;}

 ol.c {list-style-type: upper-roman;}
 ol.d {list-style-type: lower-alpha;}

Arkadaşlar yukırda bahsettiğim gibi, işaretleyiciler aslında HTML içerisinde harf, sayı ve mermi (büyük nokta) işaretiyle listelenir. Fakat yukarıda verdiğim örnekte olduğu gibi kendiniz deneme yaparsanız, farklı işaretleyicileri de kullanabileceğimizi görürsünüz.

Sırasız Listelerin İşaretleme Stilleri

Değer	Açıklama
none	işaretleyici yok
disc	Default. Daire şeklindeki noktalama
circle	Nokta işareti
square	Kare işareti

Yukarıdaki Değerleri kullanarak Örnekteki gibi durumlar atayabilirsiniz.

Sıralı Listelerin İşaretleme Stilleri

Değer	Açıklama
armenian	Geleneksel Ermeni Numaralama Sistemi
decimal	Numaralar
decimal-leading-zero	01, 02 , 03 şeklinde numaralandırma
georgian	Gürcü Numaralama Sistemi
lower-alpha	Alfabe harfleri sıralı olarak
lower-greek	Yunan Alfabesi (alpha, beta, gamma, vs.)
lower-latin	Latin alfabesi (a, b, c, d, e, vs.)
lower-roman	Roma Rakamları (i, ii, iii, iv, v,vs.)
upper-alpha	Büyük Alfabe Harfleri (A, B, C, D, E, vs.)
upper-latin	Büyük Harflerle latin alfabesi (A, B, C, D, E, vs.)
upper-roman	Büyük Roma Alfabesi (I, II, III, IV, V, vs.)

Liste Başlarına Resim Ekleme

Listelere Resim ekleme işlemi aslında çok basit bir işlemdir.CSS de var olan ist-style-image özelliğini kullanarak bu işlemi gerçekleştirebiliriz;

ul
 {
 list-style-image: url('resim.gif');
 }

Yukarıdaki stili kullanırken İE ve Operada, Firexfox gibi tarayıcılardan daha büyük resimler görünür.Bunun yanında hepsinde aynı görünmesini istetseniz aşağıdaki gibi bir formatı kullanabilirsiniz;

ul
 {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 }
 li
 {
 background-image: url(resim.gif);
 background-repeat: no-repeat;
 background-position: 0px 5px;
 padding-left: 14px;
 }

Bu kodlar ile daha da ayrıntılı bir listeleme şekli oluşturabilir, resimlerinizin tüm tarayıcılarda aynı şekilde görünmesini sağlayabilirsiniz.. Fakat tabi daha fazla kod kullanmakve tarayıcıyı daha fazla yormasına sebep olmaktadır.. Eee sonuçta sizin seçiminiz.. Yukarıdaki örnekte bulunan kodları açıkalyacak olursak;

Ul için;

• list-style-type:none,  özelliğini kullanarak zaten var olan işareti kaldırıyoruz.
• padding ve margin ayarlarını sıfırlayarak cross-browser özelliğini sağlıyoruz.

Li için;

• Resmimizin URL adresini giriyoruz
• Tekrar etmemesi için no-repeat özelliğini ekliyoruz.
• Pozisyonunu belirliyoruz ve Sol taraftan ne kadar boşluk bırakılacağını emrediyoruz.

Stenografi Özelliğiyle Listeleme

Aynı şekilde tekbir kod atayarakta bu özellikleri kullanabiliriz;

ul
 {
 list-style: square url("resim.gif");
 }

Stenografi özelliği ile birlikte kullanabileceğimiz değerler şunlardır;

• list-style-type
• list-style-position (açıklama için CSS Derslerimizi ziyaret edin)
• list-style-image

Bütün CSS Listeleme Özellikleri;

CSS kolonu CSS1 ve CSS2 de kullanım ayarlarlamalarına göre listelenmiştir.

Özellik	Açıklama	Değer	CSS
list-style	Bir liste içerisindeki bütün deklerasyonları kapsayan özelliklerdir.	list-style-type list-style-position list-style-image inherit	1
list-style-image	Listeleme biçiminde kullanılan işaretleri resim olarak kullanma	URL none inherit	1
list-style-position	Listenin Pozisyonunu belirlemek için iç taraftan ya da dış taraftanvereceğimiz boşluklar gibi özellikleri.	inside outside inherit	1
list-style-type	Liste elemanlarının tipini belirler. Sırasız listeler için kullanılır.	none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit