CSS'de Liste Özellikleri

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'de Listeler 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 :

ul { list-style-image: url('https://eminylmz.dev/asset/images/marker.png'); }

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