HTML'de iki ana liste türü vardır:

  • sırasız listeler (< ul >) - liste öğeleri madde işaretleriyle işaretlenir
  • sıralı listeler (< ol >) - liste öğeleri sayılar veya harflerle işaretlenir

Eğer HTML'de Listeler konusunu hatırlamıyorsanız , HTML Dersleri 4 - İçerik Etiketleri dersini inceleyebilirsiniz.

CSS Liste özellikleri şunları yapmanıza izin verir:

  • Sıralı ve Sırasız listeler için farklı liste öğesi işaretçileri ayarlamaya
  • Liste öğesi işaretçisi olarak bir görüntü ayarlamaya
  • Listelere ve listeleme öğelerine arka plan renkleri eklemeye.

list-style-type : Farklı Liste İşaretleyici

CSS'de "list-style-type" özelliği, liste elemanı işaretleyicisinin türünü belirtir.Aşağıdaki örnek, mevcut liste öğesi işaretçilerinden bazılarını göstermektedir:

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;
}

list-item-image : Resimli Liste İşaretleyicisi

CSS'de "list-item-image" özelliği , liste elemanı işaretçisi olarak bir resim kullanmamızı sağlar :

list-item-position : Liste İşaretleyici Konumlandırma

CSS'de "list-style-position" özelliği, liste işaretçilerinin (madde işareti noktaları) konumunu belirtir.

"list-style-position : outside;" madde işaretlerinin liste öğesinin dışında olacağı anlamına gelir. Bir liste öğesinin her satırının başlangıcı dikey olarak hizalanacaktır. Bu varsayılandır değeridir.

"list-style-position : inside" madde işaretlerinin liste öğesinin içinde olacağı anlamına gelir. Liste öğesinin bir parçası olduğu için metnin bir parçası olacak ve metni başlangıcında gözükecektir.

ul.a {
list-style-position: outside;
}
 
ul.b {
list-style-position: inside;
}

Listelerde Varsılan Biçimlendirmeyi Kaldırma

CSS'de "list-style-type: none" özelliği, işaretçileri kaldırmak için de kullanılabilir. Listenin ayrıca varsayılan kenar boşluğu (margin) ve dolgusu (padding) olduğunu unutmayın. Bunu kaldırmak için margin: 0 ve padding: 0 özelliklerini kullanın.

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

List Özelliğinin Kısa Kullanımı

CSS'de "list-style", kısa bir özelliktir. Tüm liste özelliklerini tek bir kodda ayarlamak için kullanılır: List-style özelliğini kullanırken, özellik değerlerinin sırası şu şekildedir:

  • list-style-type (Eğer işaretleyici bir resim ise ve o resim doğru yüklenemiyorsa varsayılan bir işaretleyici atamak için kullanılır)
  • list-style-position
  • list-style-image

Yukarıdaki özellik değerlerinden biri eksikse, eksik özelliğin varsayılan değeri varsa eklenecektir.