CSS Counters, web sayfalarında içerik numaralandırma işlemlerini kolaylaştıran ve yönetilen bir özelliktir. Bu özellik, özellikle içeriğin hiyerarşik yapılarını ve listelerini numaralandırmak için yaygın olarak kullanılır. Bu yazıda, CSS Counters’ın nasıl kullanılacağını ve örnek kod bloklarıyla nasıl uygulanacağını inceleyeceğiz.
Temel Kavramlar
CSS Counters kullanırken dikkate almanız gereken bazı temel kavramlar vardır:
- counter-reset: Bir sayıcıyı sıfırlar veya belirli bir değere ayarlar.
- counter-increment: Bir sayıcıyı artırır veya azaltır.
- counter() ve counters() fonksiyonları: Bir sayıcının değerini kullanarak içerikte numaralandırma yapmak için kullanılır.
Örnek Kod Blokları
- Basit Bir Numaralandırma
/* Sayıcıyı başlat */
body {
counter-reset: my-counter;
}
/* Listeyi numaralandır */
ol {
list-style-type: none; /* Numaralandırma işaretlerini kaldır */
}
ol li:before {
counter-increment: my-counter; /* Sayıcıyı artır */
content: counter(my-counter) ". "; /* Sayıcı değerini numara olarak göster */
- İç İçe Geçmiş Listelerde Numaralandırma
/* İç içe geçmiş listelerde sayıcıları sıfırla ve artır */
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: counter(section) ". "; /* İç içe geçmiş listelerde sayıcıyı göster */
}
h3::before {
content: counters(section, ".") ". "; /* İç içe geçmiş listelerde birden fazla sayıcıyı göster */
}
Sonuç
CSS Counters, web geliştiricilerin içerik numaralandırma işlemlerini kolaylaştıran güçlü bir araçtır. Bu özellik, karmaşık listeleri ve içerik yapılarını numaralandırmak için kullanılabilir. Yukarıdaki örneklerle, nasıl kullanılacağını anlamış olmalısınız. Bu özellikleri kullanarak, web sayfalarınızı daha düzenli ve anlaşılır hale getirebilirsiniz.