CSS'de Liste Özellikleri

list-style-type

Sıralı listelerde sıralamanın şeklini (a, A, 1, I, i vb..), sırasız listelerde ise satırların başındaki işaretin şeklini belirlemeye yarar. "None" değeri verilirse satırların başında hiç bir işaret çıkmamasını sağlar.

list-style-image

Sırasız listelerde (ul) satırların başına istediğimiz bir resmi koymamızı sağlar. Kullanımı şu şekildedir:

ul {

list-style-image: url(resim.png);

}

li:hover Kullanımı

Liste elemanları üzerinde fare ile gezinirken, üzerine gelinen elemanın görünümünün değişmesini sağlar. 

Örnek:

ul {     

list-style-type:circle;

}

li {    

width:80%;

margin:5px;

padding:4px;

}

li:hover {     

color:yellow;

background-color:#003366;

list-style-type:disc;

}

Yukarıdaki örnekte üzerine gelinen liste elemanının metin ve arka plan renginin değişmesi sağlanmıştır. Ayrıca li etiketine uygulanan stiller ile margin, padding ve width değerleri belirlenerek daha düzgün görünmesi sağlanmıştır.

css liste örnekleri, liste madde işareti kaldırma, li:hover kullanımı, list-style-type kullanımı, ul liste ikon resim koyma

KONU İLE İLGİLİ ÖRNEKLER

Css ile Ol ve Ul Etiketlerini Biçimlendirme Kendin Dene

ul {     

list-style-type:circle;

}

li {    

width:80%;

margin:5px;

padding:4px;

}

li:hover {     

color:yellow;

background-color:#003366;

list-style-type:disc;

}



YORUMLAR




7598  kez okundu.

Online Kullanıcı Sayısı 625