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.

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla