Utilizarea CSS Contoare
Contoare CSS sunt ca "variables" . Valorile variabile pot fi incrementat prin reguli CSS (care va urmări de câte ori acestea sunt utilizate).
Pentru a lucra cu contoare CSS vom folosi următoarele proprietăți:
-
counter-reset- Creează sau resetează un contor -
counter-increment- incremente o valoare de contor -
content- Inserturi generat conținut -
counter()saucounters()funcție - Adaugă valoarea unui contor la un element
Pentru a utiliza un contor CSS, acesta trebuie mai întâi creat cu counter-reset .
Următorul exemplu creează un contor pentru pagina (in the body selector) , apoi incrementează valoarea contorului pentru fiecare <h2> element și se adaugă "Section < value of the counter >:" la începutul fiecărui <h2> Element:
Exemplu
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Încearcă - l singur » Contoare Cuiburi
Exemplul următor creează un contor pentru pagina (section) și un contor pentru fiecare <h1> Element (subsection) . "section" contorul va fi numărate pentru fiecare <h1> Element cu "Section < value of the section counter >." Și "subsection" contorul va fi numărate pentru fiecare <h2> Element cu "< value of the section counter >.< value of the subsection counter >" :
Exemplu
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) " ";
} Încearcă - l singur » Un contor poate fi, de asemenea, util pentru a face liste prezentate, deoarece o nouă instanță a unui contor este creat automat în elemente copil. Aici folosim counters() funcționează pentru a insera un șir de caractere între diferite niveluri de contoare imbricate:
Exemplu
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Încearcă - l singur » CSS Counter Proprietăți
| Proprietate | Descriere |
|---|---|
| content | Folosit cu :: înainte și după :: pseudo-elementele, pentru a insera conținutul generat |
| counter-increment | Incrementele una sau mai multe valori contra |
| counter-reset | Creează sau resetează unul sau mai multe contoare |