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.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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í v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Komentáře
Zatím nikdo nevložil komentář - buď první!