CSS Sayaçları
Pizza
Hamburger
sosisli sandviç
CSS sayaçları, değerleri CSS kuralları tarafından artırılabilen (kaç kez kullanıldıklarını izlemek için) CSS tarafından sağlanan "değişkenlerdir". Sayaçlar, içeriğin görünümünü belgedeki yerleşimine göre ayarlamanıza olanak tanır.
Sayaçlı Otomatik Numaralandırma
CSS sayaçları "değişkenler" gibidir. Değişken değerleri CSS kurallarıyla artırılabilir (bu, kaç kez kullanıldığını izleyecektir).
CSS sayaçlarıyla çalışmak için aşağıdaki özellikleri kullanacağız:
counter-reset- Bir sayaç oluşturur veya sıfırlarcounter-increment- Bir sayaç değerini artırırcontent- Oluşturulan içeriği eklercounter()veyacounters()işlev - Bir öğeye bir sayacın değerini ekler
Bir CSS sayacı kullanmak için önce counter-reset.
Aşağıdaki örnek, sayfa için bir sayaç oluşturur (gövde seçicide), ardından her <h2> öğesi için sayaç değerini artırır ve her <h2> öğesinin başına "Bölüm < sayacın değeri >:" ekler:
Örnek
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Yerleştirme Sayaçları
Aşağıdaki örnek, sayfa (bölüm) için bir sayaç ve her <h1> öğesi (alt bölüm) için bir sayaç oluşturur. "Bölüm" sayacı, "Bölüm < bölüm sayacının değeri >." ile her <h1> öğesi için sayılır ve " bölüm sayacının < değeri ile her <h2> öğesi için "alt bölüm" sayacı sayılır. >.< alt bölüm sayacının değeri >":
Örnek
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
Bir sayaç, alt öğelerde otomatik olarak yeni bir sayaç örneği oluşturulduğundan, anahatlı listeler yapmak için de yararlı olabilir. Burada,
counters()farklı iç içe sayaç seviyeleri arasına bir dize eklemek için işlevi kullanıyoruz:
Örnek
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
CSS Sayacı Özellikleri
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |