Contoare CSS. Numerotare automată cu contoare. Proprietățiile counter-reset, counter-increment, content, counter() sau funcția counters().
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Contoarele CSS sunt „variabile” menținute de CSS ale căror valori pot fi incrementate prin reguli CSS (pentru a urmări de câte ori sunt utilizate). Contoarele vă permit să ajustați aspectul conținutului în funcție de plasarea acestuia în document.
Numerotare automată cu contoare
Contoarele CSS sunt ca „variabile”. Valorile variabilei pot fi incrementate prin reguli CSS (care vor urmări de câte ori sunt utilizate).
Pentru a lucra cu contoarele CSS vom folosi următoarele proprietăți:
- counter-reset - Creează sau resetează un contor
- counter-increment - Crește o valoare a contorului
- content - Inserează conținut generat
- counter() or counters() function - Adăugă 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 pagină (în selectorul body), apoi crește valoarea contorului pentru fiecare element <h2> și adaugă "Secțiunea <valoarea contorului>:" la începutul fiecărui element <h2>:
Exemplu:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}