counter-increment - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti counter-increment můžeme přičítat k číslu vlastní hodnotu a tak tvořit seznamy. Vlastnost se dědí.
Hodnoty
- none (výchozí) - Nic se nepočítá.
- id číslo - ID představuje jméno počítadla a číslo hodnotu, o kterou se bude zvětšovat (výchozí hodnota je 1). ID musí být definované atributem counter-reset, aby se nastavilo na hodnotu 0 a my mohli přičítat.
- initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
- inherit - Hodnota se zdědí z rodičovského elementu.
Pro vypsání musíme použít atribut content.
Ukázka
Vytvoříme si seznam pomocí nadpisů. Nadpisy nejvyšší úrovně budou mít počítadlo pod názvem kategorie a počítadlo druhé úrovně se bude jmenovat podkategorie. Toto počítadlo budeme po vypsání všech nadpisů druhé úrovně resetovat.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body
{
counter-reset: kategorie;
}
h1
{
counter-reset: podkategorie;
}
h1:before
{
counter-increment: nadpis;
content: "Sekce " counter(kategorie) ". ";
}
h2:before
{
counter-increment: podnadpis;
content: counter(kategorie) "." counter(podkategorie) ". ";
}
</style>
<title>counter-increment</title>
</head>
<body>
<h1>Programovací jazyky</h1>
<h2>PHP</h2>
<h2>JavaScript</h2>
<h2>C#</h2>
<h1>Operační systémy</h1>
<h2>Windows</h2>
<h2>Mac</h2>
<h2>Linux</h2>
</body>
</html>Výsledek:
Článek pro vás napsal Jan Lupčík
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitní modifikace TruckersMP.
Komentáře
Zatím nikdo nevložil komentář - buď první!