CSS Listeleri

Web tasarım kursumuzun CSS derslerine listelerle devam ediyoruz. Herkese başarılar dilerim.

HTML Listeleri ve CSS Liste Özellikleri

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

• Sırasız listeler (<ul>) – liste öğeleri madde simgeleriyle belirtilir.
• Sıralı listeler (<ol>) – liste öğeleri rakamlar ya da harflerle belirtilir.

CSS, listelerde şunları yapabilmemize olanak sağlar:

• Liste öğelerinin varsayılan işaretçilerini değiştirebilme
• Sırasız ve sıralı listeler için farklı liste işaretçileri ayarlayabilme
• Bir resmi liste öğesi işaretçisi olarak ayarlayabilme
• Listelere arka plan rengi verebilme

Farklı Liste Öğesi İşaretçileri

list-style-type seçilen liste öğelerinin işaretçi türünü belirler.

Aşağıdaki örnekte farklı işaretçi türlerinin kullanımı 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;
}

Not: Değerlerin bazıları sırasız listeler, bazıları ise sıralı listeler için kullanılır.

Liste Öğesi İşaretçisi Olarak Resim Atama

list-style-image seçili liste öğelerine işaretçi olarak resim eklemek için kullanılır.

Örnek:

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

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

list-style-position liste işaretçisinin metin kutusunun dışında (outside, varsayılan) mı yoksa içinde (inside) mi duracağını belirler.

ul {
    list-style-position: inside;
}

Liste – Kısaltılmış Özellik

list-style, liste özelliklerini tek satırda yazmamızı sağlayan kısaltılmış bir özelliktir.

Örnek:

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

Arka Plan Rengi Verme

Web tasarımlarımızda oluşturduğumuz listeleri daha ilgi çekici hâle getirmek için arka plan renklerini kullanırız.

Bu sayede listelerimiz okuyanlar açısından hem daha ilgi çekici hem de düzenli görünecektir.

Burada <ol> ya da <ul> etiketine verilen stiller listenin tamamını, <li> etiketlerine verilen stiller ise her bir liste öğesini etkiler.

Şimdi sizlere hem HTML liste kodlarını hem de CSS liste kodlarını vererek farklı liste stillerini deneyerek oluşturmanızı sağlamak istiyorum.

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>Arka Plan Rengi Verilmiş Liste:</h1>

<ol>
  <li>Pizza</li>
  <li>Hamburger</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Pizza</li>
  <li>Hamburger</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.