CSS counter-increment Özelliği

CSS counter-increment

Css counter-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 CSS counter-increment özellikleri  
Varsayılan Değer: none  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS2  
JavaScript counter-increment: object.style.counterIncrement = "subsection";

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

Bu blogdaki popüler yayınlar

HTML yorum etiketi ile öğe gizleme örneği

HTML Resimler

Html5 canvas animasyon dersleri Javascript Yilan Oyunu

Javascript ile neler yapılabilir

HTML blockquote Etiketi Örnek

YouTube Reklam Engelleyici

Linklerin Renklerini Değiştirme Örnek