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.
