Liste stili görseli
list-style-image ile özel madde işareti kullanırsın.
Kendi işaretini kullan
Bazen standart daire veya kare yerine kendi grafiğini madde işareti yapmak istersin. list-style-image özelliği bunu sağlar. Bir görselin adresini verirsin; tarayıcı her ögenin önüne o grafiği basar.
list-style-type ile birlikte yazılırsa görsel yüklenemediğinde yedek olarak tür kullanılır. Bu yedek, görsel eksikse listenin biçimsiz kalmasını önler.
url() ile çağır
Görsel adresi url() fonksiyonu içinde verilir: list-style-image: url('img/yildiz.png'). Tırnak işaretleri isteğe bağlıdır; tek tırnak, çift tırnak veya tırnaksız yazılabilir. Yol göreceli veya mutlak olabilir.
Görsel otomatik ölçeklenmez; çok büyük bir dosya listenin düzenini bozar. Bu yüzden küçük, madde işaretine uygun bir görsel seçmek önem taşır.
Uygulama Galeri listesine yıldız işareti koy
Bir ul.gallery sınıf seçicisi yaz ve list-style-image: url('star.png') tanımla. Böylece her ögenin önüne yıldız görseli gelecek.
Örnek çözümü göster
/* galeri listesi için yıldız görseli */
ul.gallery {
list-style-image: url('star.png');
}Kendini test et
-
Hangisi geçerli bir bildirimdir?
ul { list-style-image: ?; }- list-style-image: img/yildiz.png
- list-style-image: src('img/yildiz.png')
- list-style-image: url('img/yildiz.png')
- list-style-image: image('img/yildiz.png')
Cevabı göster
list-style-image: url('img/yildiz.png') — Doğru. Görsel yolu url() fonksiyonu içinde verilir.
-
Yıldız görselini madde işareti yap
ul.gallery { ____; }Cevabı göster
ul.gallery { list-style-image: url('star.png'); } -
Özelliği görevine eşle
- list-style-type
- Madde işaretinin biçimi
- list-style-position
- İşaretin iç veya dış konumu
- list-style-image
- Özel görsel işaret