Liste Özellikleri Html etiketlerinden bildiğimiz sıralı (ordered) ve sırasız (unordered) listelere stil vermek için liste özelliklerini kullanacağız. Sıralı ve sırasız listelerin madde imlerinin stilini ‘list-style-type’ özelliğini kullanarak değiştireceğiz. Sırasız listeler için kullanılan şekillerin yerine, madde imi olarak bir görsel kullanmak istediğimizde “list-style-image” özelliğinden yararlanacağız.
Sıralı Listelere Stil Verme Sıralı listeler için “list-style-type” özelliğine aşağıdaki değerlerden istediğimizi vererek madde imimizin biçimini değiştirebiliriz. decimal: Normal numaralandırma decimal-leading-zero :Sayının önüne sıfır alarak artar. (01, 02, 03, vb.) lower-alpha: Küçük harflerden oluşan alfabe (a, b, c, d, e, 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: ul { list-style-type:lower-alpha; }
Sırasız Listelere Stil Verme Sırasız listeler için “list-style-type” özelliğine aşağıdaki değerlerden istediğimizi vererek madde imimizin biçimini değiştirebiliriz. None: Madde imini kaldırır. Disc: Madde başlarında siyah yuvarlak madde imi oluşturur. Varsayılan. circle :Madde başlarında siyah yuvarlak içi boş madde imi oluşturur. Square: Madde başlarında siyah kare madde imi oluşturur. Örnek: ul { list-style-type:circle; }
Madde İmi Olarak Resim Belirleme “list-style-image” özelliği sayesinde, istediğimiz herhangi bir görseli (tercihen gif, png) boyutları uygun olmak şartıyla madde imi olarak kullanabiliriz. Örnek: ul { list-style-image:url("maddeimi.png"); }