CSS Dersleri 17 - Liste Özellikleri

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Liste Özelliklerinin Kullanımı konusunu öğreneceğiz.

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 :

ul {   list-style-image: url('https://kodlamavakti.com/asset/1/page-201/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.