CSS Liste

HTML ile Listeler Oluşturmak ve CSS List Özellikleri

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

• Sıralı liste (<ol>) - bu liste türünde yukarıdaki ilk örnekte olduğu gibi liste elemanlarının başında numaralar vardır.
• Sırasız liste (<ul>) -bu liste türünde yukarıdaki ilk örnekte olduğu gibi liste elemanlarının başında nokta simgesi vardır.

CSS liste özellikleri ile listeler üzerinde pek çok görsel değişiklik yapmak mümkündür:

• Sıralı listeler için listeleme sırasında farklı simgeler kullanılabilir
• Sırasız listeler için listeleme sırasında farklı simgeler kullanılabilir
• Bir resim sıralanan elemanların başında listeleme simgesi olarak kullanılabilir
• Listenin kendine ve listenen elemanlara zemin rengi uygulanabilir

CSS list-style-type Özelliği - Farklı Simgeler Kullanarak Listeleme

CSS list-style-type özelliği ile liste maddelerinin başındaki işaretçi değiştirilebilir.

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

CSS list-style-image Özelliği - Liste Madde İşaretcisi Olarak Resim Kullanımı

CSS list-style-image özelliği ile liste madde işaretçisi olarak resim kullanabilirsiniz.

ul {
    list-style-image: url('/img/kedi.png');
}

CSS list-style-position Özelliği

CSS list-style-position özelliği liste madde işaretçisinin içeriğe göre içerde mi yoksa dışarda mı olacağını belirler.

ul {
    list-style-position: inside;
}

CSS list-style Özelliği - List Özelliğinin Kısa Yazımı

Yukarıdaki pek çok özellik kısaca list-style özelliği ile yazılabilir.

ul {
    list-style: square inside url("/img/kedi.png");
}

List özelliği kısa yazıldığında sırası ile şu özellikler yazılmalıdır:

• list-style-type Eğer list-style-image kullanışmışsa ve bir sebepten burada belirtilen resim görüntülenmiyorsa buradaki simge gösterilir.
• list-style-position Liste madde işaretçisinin konumunu belirler.
• list-style-image Liste madde işaretçisi olarak buraya verilen resim görüntülenir.

Eğer bu üçlü özellikten biri eksik yazılırsa, eksik olan özelliğin varsayılan değeri kullanılır.

Listenin Renkler ile Stillendirilmesi

Liste diğer CSS özellikleri kullanılarak stillendirilebilir.

Özellikle renk verilerek çok iyi sonuçlar elde edilebilir.

<ul> ve <ol> etiketlerine verilen özellikler tüm  liste maddelerini etkilerken, <li> etiketine verilen özellikler bireysel olarak o maddeleri etkiler.

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