CSS Listeler (Lists)

CSS Listeler (Lists)

Sırasız Listeler:

• Kahve
• Çay
• Kola

• Kahve
• Çay
• Kola

Sıralı Listeler:

1. Kahve
2. Çay
3. Kola

1. Kahve
2. Çay
3. Kola

HTML Listeleri ve CSS Liste Özellikleri

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

• sırasız listeler (<ul>) - liste öğeleri madde işaretleri ile işaretlenmiştir.
• sıralı listeler (<ol>) - liste öğeleri sayılar veya harflerle işaretlenmiştir.

CSS liste özellikleri şunları yapmanızı sağlar:

• Sıralı listeler için farklı liste öğesi işaretçileri ayarlama.
• Sırasız listeler için farklı liste öğesi işaretçileri ayarlama.
• Liste öğesi işaretçisi olarak bir resim ayarlama.
• Listelere ve liste öğelerine arka plan renkleri ekleme.

Farklı Liste Öğesi İşaretçileri

list-style-type özelliği, liste öğesi işaretçisinin türünü belirtir.

Aşağıdaki örnek, mevcut liste öğesi işaretlerinden bazılarını göstermektedir.

Örnek:

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

Not: Değerlerin bazıları sırasız listeler, bazıları ise sıralı listeler içindir.

Liste Öğesi İşaretleyicisi Olarak Bir Görüntü Ekleme

list-style-image özelliği, bir resmi liste öğesi işaretçisi olarak ayarlar.

Örnek:

ul {
  list-style-image: url('profil.gif');
}

Liste Öğesi İşaretçilerini Konumlandırma

list-style-position özelliği, liste öğesi işaretçilerinin konumunu belirtir.

Örnek: 

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

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

"list-style-position: outside;" madde işaretlerinin liste öğesinin dışında olacağı anlamına gelir. Liste öğesinin her satırının başlangıcı dikey olarak hizalanır.

• Kahve - Sıcak bir içecektir.
• Çay
• Kola

"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 algılanır ve metni sağa doğru iter.

• Kahve - Sıcak bir içecektir.
• Çay
• Kola

Varsayılan Ayarları Kaldırma

list-style-type:none özelliği, işaretleri/maddeleri kaldırmak için de kullanılabilir. Listenin ayrıca varsayılan kenar boşluğa (margin) ve iç boşluğa (padding) sahip olduğunu unutmayın. Bunu kaldırmak için <ul> veya <ol>'a margin:0 ve padding:0 eklemelisiniz.

Örnek:

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

Liste - Steno (Kısaltma) Özelliği 

Liste stili özelliği bir stenografi özelliğidir. Tüm liste özelliklerini tek bir satır şeklinde yazılabilir.

Örnek:

ul {
  list-style: square inside url("profil.gif");
}

Steno özelliğini kullanırken, özellik değerlerinin sırası dikkat edilmelidir.

• list-style-type (bir liste stili resim belirtilmişse, resim herhangi bir nedenle görüntülenemiyorsa bu özelliğin değeri görüntülenecektir)
• list-style-position (liste öğesi işaretçilerinin içerik akışının içinde mi yoksa dışında mı görüneceğini belirtir)
• list-style-image (bir resmi liste öğesi işaretçisi olarak belirtir)

Renklerle Stil Listesi Oluşturma

Listeleri biraz daha ilginç hale getirmek için renklerle de biçimlendirebiliriz.

<ol> veya <ul> etiketine eklenen her şey tüm listeyi etkilerken <li> etiketine eklenen özellikler tek tek liste öğelerini etkiler.

Örnek:

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}