CSS Sayacı
- Önceki Sayfa CSS Form
- Sonraki Sayfa CSS Web Sitesi Düzeni
Pizz
Hamburger
Sosis
CSS sayıcıları, CSS tarafından tutulan "değişkenler"dir. Değişken değerleri, CSS kuralları ile artırılabilir (kullanım sayısını takip edebilir).
Sayıcı, belgedeki içerik konumuna göre görünümünü ayarlamanıza olanak tanır.
Sayıcı içeren otomatik numaralandırma
CSS sayıcıları, "değişkenler" gibi çalışır. Değişken değerleri, CSS kuralları ile artırılabilir (kullanım sayısını takip edebilir).
CSS sayıcıları kullanmak için aşağıdaki özellikleri kullanacağız:
counter-reset
- Sayıcıyı oluşturur veya sıfırlarcounter-increment
- Sayıcı değeri artırırcontent
- Oluşturulan içeriği eklercounter()
veyacounters()
fonksiyon - sayıcı değerini ögeye ekler
CSS sayıcıları kullanmak için önce counter-reset
Oluşturun.
Aşağıdaki örnek, sayfa (body seçicisinde) için bir sayıcı oluşturur, ardından her <h2> ögesine sayıcı değeri ekler ve her <h2> ögesinin başına "Bölüm <sayıcı değeri>": ekler:
örnek
body { counter-reset: section; } h2::before { counter-increment: section; content: "Bölüm " counter(section) ": "; }
Düzyata sayıcılar
Aşağıdaki örnek, sayfa (section) için bir sayıcı oluşturur, her <h1> ögesi (subsection) için bir sayıcı oluşturur.
"section" sayıcı, her <h1> ögesi için sayar, "Bölüm" ve section sayıcı değerini yazdırır, "subsection" sayıcı, her <h2> ögesi için sayar, section sayıcı değerini ve subsection sayıcı değerini yazdırır:
örnek
body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Bölüm " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }
Sözdizimi sayıcılar, özet listeleri oluştururken de çok faydalıdır, çünkü alt öğelerde otomatik olarak yeni bir sayıcı örneği oluşturulur. Burada, aşağıdaki şekilde kullanıyoruz counters()
fonksiyon, farklı seviyelerdeki içe çıkan sayıcılar arasında bir dizi ekler:
örnek
ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; }
CSS Sayacı Özellikleri
Özellik | Açıklama |
---|---|
content | ::before ve ::after sahte elementleri ile birlikte kullanarak oluşturulan içeriği eklemek için. |
counter-increment | Bir veya daha fazla sayacı artırın. |
counter-reset | Bir veya daha fazla sayacı oluştur veya sıfırlayın. |
- Önceki Sayfa CSS Form
- Sonraki Sayfa CSS Web Sitesi Düzeni