Css Basit Taglar ve Özellikler -2

css-logo

LİSTE

2 çeşit liste türü vardır , bunlar sıralı ve sırasız olmak üzere 2 çeşit olarak sınıflandırılıyor.

  • Sırasız Liste
  • Kahve
  • Çay
  • Kola
  1. Sıralı Liste
  2. Kahve
  3. Çay
  4. Kola

HTML Listeleri ve CSS Liste Özellikleri

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

  • Sıralanmamış listeler (<ul>) madde işaretleri ile işaretlenmiştir
  • Sıralı listeler (<ol>) – ise rakam ve harf ile işaretlenmiştir.

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

  • Sıralı listeler için farklı liste öğesi işaretleyicileri ayarlama
  • Sırasız listeler için farklı liste öğesi işaretleyicileri ayarlama
  • Görüntüyü liste öğesi işaretleyicisi olarak ayarlama
  • Listelere ve liste öğelerine arka plan renkleri ekleme

Farklı Liste Öğesi İşaretçileri

List-style-type özelliği, liste öğesi işaretleyicisinin türünü belirtir. Aşağıdaki örnekte, kullanılabilir liste öğesi işaretlerinden bazıları gösterilmektedir:

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

Yukarıdaki kodun çıktısı aşağıdaki gibidir.

Reklamlar


Sırasız listelere örnek:

  • Kahve
  • Çay
  • Coca Cola
  • Kahve
  • Çay
  • Coca Cola

Sıralı listelere örnek:

  1. Kahve
  2. Çay
  3. Coca Cola
  1. Kahve
  2. Çay
  3. Coca Cola

Not: Değerlerin bazıları sıralanmamış listeler, bazıları sıralı listeler içindir.

Liste İşaretcisi İçin Resim Belirleme

List-style-image özelliği, liste öğesi işaretleyicisi olarak bir görüntüyü belirtir. Örnek olarak aşağıdaki kodu verebiliriz.

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

Varsayılan Ayarları Değiştirme

List-style-type: none özelliği işaretçileri / madde işaretlerini kaldırmak için de kullanılabilir. Listenin ayrıca varsayılan kenar boşluğu ve dolguya sahip olduğunu unutmayın. Bunu kaldırmak için kenar margin: 0 ve padding: 0 değerini veya öğesine ekleyin.

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

Tam Genişlikte Listeler Oluşturma

Aşağıdaki kod uygulandığında full-width liste oluşmuş olacağız.

ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}

ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

ul li:last-child {
  border-bottom: none
}

Diğer yazımada bakabilirsiniz.


Daha detaylı olarak W3schools’a göz atabilirsiniz.


Leave a Comment