Contoare CSS
Titlurile, secțiunile și elementele de listă pot fi numerotate automat prin contoare CSS, fără niciun script.
Gândește-te la un contor ca la o variabilă menținută de CSS, a cărei valoare poate fi crescută sau scăzută prin reguli.
Numerotarea Automată CSS cu Contoare
Deoarece contoarele se comportă ca niște variabile, regulile CSS le pot schimba valorile.
Acestea sunt proprietățile implicate:
counter-reset- Creează un contor sau îl reseteazăcounter-increment- Crește sau scade valoarea unui contorcontent- Inserează conținut generatcounter()- Pune valoarea unui contor într-un element
Un contor nu există până când counter-reset nu îl creează, așa că acest pas vine întotdeauna primul.
Creșterea și Scăderea Contorului CSS
În acest exemplu, selectorul body creează un contor pentru toată pagina, iar apoi fiecare element <h2> îi crește valoarea cu 1.
Exemplu
Prompt
Creați o pagină care folosește contoare CSS pentru a numerota automat titlurile h2. Folosiți counter-reset pe body pentru a crea un contor numit „section”, apoi folosiți counter-increment și content pe h2::before pentru a afișa „Section X: ” înainte de fiecare titlu. Includeți trei elemente h2 cu ceva text de paragraf.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Increment</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<p>This tutorial covers the basics of HTML.</p>
<h2>CSS Tutorial</h2>
<p>This tutorial covers the basics of CSS.</p>
<h2>JavaScript Tutorial</h2>
<p>This tutorial covers the basics of JavaScript.</p>
</body>
</html>
Decrementarea unui Contor
Un al doilea parametru pentru counter-increment setează pasul, care este implicit 1. Dacă îl faci -1, valoarea contorului scade.
Exemplu
Prompt
Creați o pagină care folosește contoare CSS cu o valoare descrescătoare. Folosiți counter-reset pe body pentru a crea un contor numit „section”, apoi folosiți counter-increment cu o valoare de -1 pe h2::before pentru a scădea contorul. Afișați „Section X: ” înainte de fiecare titlu folosind proprietatea content. Includeți trei elemente h2 cu text de paragraf.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Decrement</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Decrementing a CSS Counter</h1>
<h2>HTML Tutorial</h2>
<p>This tutorial covers the basics of HTML.</p>
<h2>CSS Tutorial</h2>
<p>This tutorial covers the basics of CSS.</p>
<h2>JavaScript Tutorial</h2>
<p>This tutorial covers the basics of JavaScript.</p>
</body>
</html>
Incrementarea cu Valori Personalizate
Orice valoare poate fi folosită ca pas. În exemplul de mai jos, contorul crește cu 2.
Exemplu
Prompt
Creați o pagină care folosește contoare CSS incrementate cu 2. Folosiți counter-reset pe body pentru a crea un contor numit „section”, apoi folosiți counter-increment cu o valoare de 2 pe h2::before pentru a crește contorul cu 2 de fiecare dată. Afișați „Section X: ” înainte de fiecare titlu folosind proprietatea content. Includeți trei elemente h2 cu text de paragraf.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counter Custom Increment</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section 2;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Incrementing by Custom Values</h1>
<h2>HTML Tutorial</h2>
<p>This tutorial covers the basics of HTML.</p>
<h2>CSS Tutorial</h2>
<p>This tutorial covers the basics of CSS.</p>
<h2>JavaScript Tutorial</h2>
<p>This tutorial covers the basics of JavaScript.</p>
</body>
</html>