CSS Sayaçlar kullanma
CSS sayaçları gibi "variables" . Değişken değerleri (kullanıldıkları kaç kez izleyecek olan) CSS kuralları tarafından artırılabilir.
CSS sayaçları çalışmak için aşağıdaki özellikleri kullanır:
-
counter-reset- oluşturur veya bir sayacı sıfırlar -
counter-increment- bir sayaç değerini artırır -
content- Uçlar içeriği oluşturulan -
counter()ya dacounters()işlevi, - bir öğeye bir sayaç değerine ekler
CSS sayacını kullanmak için, öncelikle birlikte oluşturulması gerekir counter-reset .
Aşağıdaki örnek sayfası için bir sayaç oluşturur (in the body selector) , daha sonra her biri için sayaç değerini artırır <h2> elementi ve ekliyor "Section < value of the counter >:" Her başlangıcına <h2> elemanının:
Örnek
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Kendin dene " yuvalama Sayaçlar
Aşağıdaki örnek sayfa için bir sayaç oluşturur (section) ve her biri için bir sayaç <h1> elemanı (subsection) . "section" karşı her sayılır <h1> ile eleman "Section < value of the section counter >." Ve "subsection" karşı her sayılır <h2> sahip eleman "< value of the section counter >.< value of the subsection counter >" :
Ö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) " ";
} Kendin dene " Sayaç aynı zamanda bir tezgahın yeni bir kopyasını otomatik alt öğeleri oluşturulan çünkü özetlenen listeleri yapmak yararlı olabilir. Burada kullandığımız counters() iç içe sayaçların farklı düzeyleri arasında bir dize eklemek için işlev:
Örnek
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Kendin dene " CSS Sayaç Özellikleri
| özellik | Açıklama |
|---|---|
| content | :: ve :: after sözde elemanları, eklemek için önce oluşturulan içeriğe sahip kullanılır |
| counter-increment | bir ya da daha fazla karşı değerleri artımlarla |
| counter-reset | Oluşturur veya bir veya daha fazla sayaçlarını sıfırlar |