CSS counter-increment Özelliği
CSS counter-increment
Csscounter-increment özelli ile sayac görevini Css'teki sahte seçicilere yaptırılabilir.
Örnek:
Bu örnekte "h2" ve "h3" html elemanlarını sayac vazifesi gördürerek bir eğitim sitesi başlıkları haline dönüştürebiliyoruz.body {
counter-reset: section;
}
h2 {
counter-reset: subsection;
}
h2:before {
counter-increment: section;
content: "Bölüm " counter(section) "- ";
}
h3:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
CSS counter-increment nedir nasıl kullanılır
CSS sayacını kullanmak için, öncelikle varsayılan bir değere 0 sıfırlanması gerekir. Ardından bfore veya after gibi sahte seçicileri kullanarak tanımlamalar yapılabilir. Örnekleri inceleyiniz.
CSS counter-increment Tarayıcı Desteği
| CSS Kodu: | |||||
|---|---|---|---|---|---|
| counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS counter-increment Değerleri
counter-increment:none|id|initial|inherit;
CSS counter-increment özelliği değerleri
| CSS counter-increment değerleri | CSS counter-increment değerleri tanımları |
|---|---|
| none | Varsayılan değerdir.Sayaçlar sıfırlanmaz |
| id number | Hangi sayacın sıfırlanacağını belirten isim yazılır. |
| initial | Özelliğin varsayılan değerine döndürür. |
| inherit | Soybağından gelen değeri alır. |
Yorumlar
Yorum Gönder