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;
}
11972 kez okundu.