Temel Seviye

İleri Seviye

CSS Listeler - Lists

Sıralı veya Sırasız listelere ( ol - ul ) stil vermek için " list-style-type " özelliğini kullanacağız. Bu özellik için aşağıda ki değerleri kullanabiliriz.

CSS Sıralı Liste için Değerler ( Ol )

Değer Açıklama
armenian Geleneksel Ermeni Numaralandırması
decimal Normal Numaralandırma
decimal-leading-zero Sayının Önüne Sıfır Koyarak Artar. (01, 02, 03, vb.)
georgian Geleneksel Gürcü Numaralandırması (an, ban, gan, vb.)
lower-alpha Küçük Harflerden Oluşan Alfabe (a, b, c, d, e, vb.)
lower-greek Küçük Harflerden Oluşan Yunan Alfabesi (alpha, beta, gamma, vb.)
lower-latin Küçük Harflerden Oluşan Latin Alfabesi (a, b, c, d, e, vb.)
lower-roman Küçük Harflerden Oluşan Roman Alfabesi (i, ii, iii, iv, v,vb.)
upper-alpha Büyük Harflerden Oluşan Alfabe (A, B, C, D, E, vb.)
upper-latin Büyük Harflerden Oluşan Latin Alfabesi (A, B, C, D, E, vb.)
upper-roman Büyük Harflerden Oluşan Roman Alfabesi (I, II, III, IV, V, vb.)

Örnek kullanımı görelim...

ul {
    list-style-type:lower-alpha;
}

CSS Sırasız Liste için Değerler ( Ul )

Değer Açıklama
none Liste ikonunu kaldırır.
disc Madde başlarında siyah yuvarlak ikon çıkarır. Varsayılan.
circle Madde başlarında siyah yuvarlak içi boş ikon çıkarır.
square Madde başlarında siyah kare ikon çıkarır.

Örnek kullanımı görelim...

ul {
    list-style-type:circle;
}

CSS Listelere Madde Görseli Ekleme

Sırasız Liste ( Ul ) için verilen değerler yetersiz geldiyse "list-style-image " özelliği tam size göre. Bu özellik ile madde ikonunun yerine görsel kullanabilirsiniz. Örnek kodu görelim.

ul {
    list-style-image: url('ornek.jpg');
}

CSS Tüm Tarayıcılarda Aynı Görüntüyü Sağlama - CrossBrowser

Tüm tarayıcılarda aynı görüntüyü elde etmek için aşağıda ki gibi bir kod kullanmamız gerekir. Margin ve Padding özelliklerini ilerleyen konularda inceleyeceğiz.

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

li {
    background-image: url('ornek.jpg');
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 14px;
}

CSS Liste Kısa Kod Kullanımı

Liste kodlarını yazarken bazı kodları kısaltabiliriz. Örneğin "list-style" yazıp diğer özellikleri arka arkaya bir boşluk bırakarak sıralayabiliriz ve url alanında ki tırnak işaretlerini kullanmayabiliriz.

ul {
    list-style: lower-alpha url(ornek.jpg);
}