Yükleniyor...

CSS’te listeler

HTML size ul ve ol verir. CSS bu listelerin nasıl görüneceğine karar verir — yuvarlak madde işaretleri, kareler, sayılar, harfler veya gezinme menüsü kurarken hiç işaret yok.

Bir list-style araç seti

📊 Bir bakışta liste stilleri

Özellik Günlük işi
list-style-type İşaret şekli veya numaralandırma stili (disc, square, decimal…)
list-style-position İşaret içerik kutusunun içinde veya dışında
list-style-image İşaret olarak görsel kullan
list-style Tip, konum ve görsel kısayolu
list-style: none İşaretleri kaldır (nav menülerinde yaygın)

İşaretler liste öğesine aittir ama stilleri genellikle ul veya ol üzerine koyarsınız ki her li aynı görünümü miras alsın.

Madde işareti türleri

Sırasız listeler sıkça disc ile başlar. Tasarım daha sakin veya daha keskin bir işaret isterse circle veya square kullanın.

Madde işareti türleri

css
CSS Code 
ul.features {
list-style-type: square;
}

ul.notes {
list-style-type: circle;
}

Numaralı ve harfli listeler

Sıralı listeler numaralandırma stilleri kullanır. decimal günlük tercihtir; lower-alpha veya upper-roman taslaklar ve resmi adımlar için uygundur.

Sıralı liste türleri

css
CSS Code 
ol.steps {
list-style-type: decimal;
}

ol.outline {
list-style-type: lower-alpha;
}

İşaret konumu — içeride veya dışarıda

list-style-position: outside (alışılmış varsayılan) işareti kenarda tutar. inside onu metin akışına çeker — dar kartlarda işe yarar.

Akıştaki işaretler

css
CSS Code 
ul.card-list {
list-style-position: inside;
padding-left: 0;
}

Menüler için işaretleri kaldırın

Gezinme listeleri nadiren madde işareti ister. list-style: none temizler — sonra padding/margin ile kendi boşluğunuzu ekleyin.

Temiz nav listesi

css
CSS Code 
nav ul {
list-style: none;
margin: 0;
padding: 0;
}

Görsel işaretler ve kısayol

Küçük bir görsel madde işaretinin yerini alabilir. Minik varlıkları tercih edin. list-style kısayolu tip, konum ve görseli tek satırda ayarlayabilir.

Görsel işaret + kısayol

css
CSS Code 
ul.custom {
list-style: square outside none;
}

ul.icons {
list-style-image: url("/icons/check.svg");
}

Sakin bir liste alışkanlığı

Liste başına net bir işaret stili seçin, görsel işaretleri küçük tutun ve menülerde none sonrası padding’i sıfırlayın ki öğeler temiz hizalansın.

Okunaklı makale listesi

css
CSS Code 
article ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}

Kendiniz deneyin

  1. Bir ul’yi list-style-type: square yapın.
  2. Bir ol’yi lower-alpha ile stillendirin.
  3. Kısa bir kart listesine list-style-position: inside verin.
  4. nav ul madde işaretlerini list-style: none ve sıfır padding ile kaldırın.
  5. Minik bir list-style-image deneyin; görsel başarısız olursa type’a dönün.

Yaygın hatalar

  • Yalnızca li üzerindeki color’ın her yerde özel işaretleri değiştireceğini beklemek
  • list-style: none kullanıp büyük varsayılan padding bırakmak
  • Satıra hükmeden kocaman list-style-image dosyaları
  • Sıra önemliyken semantik ol yerine CSS ile ul numaralandırmak
  • Bu dersi bağlantı hover/visited durumlarıyla karıştırmak (önceki oturum)

Özet

  • list-style-type madde işareti veya numaralandırma stilini seçer
  • list-style-position işaretleri içeri veya dışarı koyar
  • list-style: none menüler için işaretleri temizler
  • list-style-image ve list-style kısayolu ekstra seçenek ekler
  • İşaretleri sakin tutun; madde işaretini kaldırdıktan sonra padding’i bilinçli ayarlayın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 31 / 35
Css Ders