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

Sıradaki ders: Bağlantı durumları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler