Lekce 1 - Čítač a vlastnost content v CSS3

V dnešní lekci si ukážeme takovou dynamickou vlastnost counter-increment a content.

`counter-increment`

Jak už z názvu můžeme poznat, jde o čítač. K číslu tak můžeme přičíst vlastní hodnotu a tvořit tak například seznamy. Vlastnost se dědí.

Syntaxe

Syntaxe je jednoduchá, jako u každé jednoduché vlastnosti, čili vlastnost: hodnota.

Hodnoty

Nejdříve si uvedeme hodnoty, kterou může vlastnost nabývat:

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é vlastností counter-reset, aby se nastavilo na hodnotu 0 a my mohli přičítat. Tuto vlastnost si ukážeme za chvíli.
initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka bude až ke konci, protože musíme nejdříve probrat související vlastnosti Pro vypsání musíme použít vlastnost content. Na ni přijde čas za chvíli.

`counter-reset`

Nejdříve se podíváme na vlastnost counter-reset, díky které definujeme ID počítadla a zároveň ho resetujeme. Vlastnost se dědí stejně jako counter-increment. Syntaxe je opět stejná.

Hodnoty

Hodnoty vlastnosti counter-reset jsou následující:

none (výchozí) - Žádné počítadlo se neresetuje. ID číslo - ID představuje jméno počítadla a číslo hodnotu, na kterou se počítadlo resetuje (výchozí hodnota je 0). initial - Nastaví vlastnost na výchozí hodnotu (tedy na none). inherit - Hodnota se zdědí z rodičovského elementu.

Pro přičítání můžeme použít již zmíněnou vlastnost counter-increment a pro vypsání čísla vlastnost content, kterou si také nyní uvedeme.

`content`

Pomocí CSS3 vlastnosti content nastavujeme, co bude před a za elementem pomocí pseudo-elementů :before a :after. Vlastnost se dědí, stejně jako předchozí.

Syntaxe

Vlastnost content můžeme deklarovat několika způsoby. Pokud chceme nastavit jenom jednu věc (např. text), napíšeme pouze jednu hodnotu:

content: "Vlastní text.";

Pokud bychom chtěli definovat více hodnot, stačí je jenom napsat za sebe a nemusíme tyto hodnoty nějak spojovat plusem nebo něčím jiným, jako například u programovacích jazyků. Vlastnosti pro daný atribut se vypisují v pořadí, ve kterém jsou deklarované hodnoty:

content: "Úryvek z mého dětství: " open-quote;

Hodnoty

Máme následující hodnoty vlastnosti content:

normal (výchozí) - Nenastaví žádný text a vše se vypisuje stejně jako před použitím této hodnoty.
none - Nic se nevypíše.
counter - Nastaví aktuální číslo počítání (musí být nastavena vlastnost counter-increment).
attr(atribut) - Nastaví atribut daného elementu.
text - Vypíše daný text.
open-quote - Nastaví začínající uvozovky.
close-quote - Nastaví uzavírající uvozovky (musí být nastavena předešlá hodnota).
no-open-quote - Odstraní začínající uvozovky (musí být nastavena hodnota open-quote).
no-close-quote - Odstraní uzavírající uvozovky (musí být nastavena hodnota close-quote).
url(adresa) - Nastaví média na dané URL adrese (obrázek, video, písnička atd.).
initial - Nastaví vlastnost na výchozí hodnotu (tedy na normal).
inherit - Hodnota se zdědí z rodičovského elementu.

Ukázky použití

Nejprve si tedy ukážeme vlastnost counter-increment. Využijeme u toho však i vlastnost counter-reset a content.

`counter-increment` a `counter-reset`

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:

body {
    counter-reset: kategorie;
}
h1 {
    counter-reset: podkategorie;
}
h1:before {
    counter-increment: kategorie;
    content: "Sekce " counter(kategorie) ". ";
}
h2:before {
    counter-increment: podkategorie;
    content: counter(kategorie) "." counter(podkategorie) ". ";
}

HTML stránky bude vypadat takto:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>counter-increment</title>
                <link rel="stylesheet" href="style.css">
        </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 prohlížeči se nám zobrazí toto číslování:

counter-increment

counter-increment.html

Co kdybychom chtěli římské číslice namísto arabských? Není problém, vyřešíme to pomocí druhého argumentu u hodnoty counter takto:

content: "Sekce " counter(kategorie, upper-roman) ". ";

Všimněte si hodnoty upper-roman jako druhý argument. To umístíme všude, kde chceme římská číslice. Já to nastavím pouze u kategorie, jako výsledek budeme mít tedy římská čísla:

upper-roman

upper-roman.html

`content`

Vlastnosti counter-reset a counter-increment máme tedy za sebou. Nyní se podíváme blíže na content, protože nám nabízí více možností, než například jen pro seznam.

`open-quote` a `close-quote`

Pro příklad si vytvoříme 2 odstavce textu, který obalíme do uvozovek. Před uvozovky s textem však vložíme vlastní text, ten se bude opakovat. Nejdříve se podíváme na CSS:

p:before {
    content: "Přečtěte si toto: " open-quote;
}
p:after {
    content: close-quote;
}

CSS by bez HTML bylo ztracené, proto si uvedeme také příklad HTML:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>content</title>
                <link rel="stylesheet" href="style.css">
        </head>
        <body>
                <p>Velmi důležitý text.</p>
                <p>Toto je také velmi důležité.</p>
        </body>
</html>

Ve výsledku se nám zobrazí text před odstavci, poté následuje uvozovka a text odstavce (z HTML). Poté se ukončí uvozovky:

content

content.html

`attr`

Hodnota attr může být velmi zajímavá, na použití je také jednoduchá. Vytvoříme si následující HTML:

<!DOCTYPE html>
<html>
    <head>
                <meta charset="utf-8" />
                <title>content attr</title>
                <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>Další zajímavé články:</p>
        <p><a href="https://www.itnetwork.cz/html-css/css3/uvod-do-animaci-elementu-pomoci-css3">Animace v CSS</a></p>
        <p><a href="https://www.itnetwork.cz/html-css/html5">Průvodce HTML 5</a></p>
    </body>
</html>

Vypíšeme si atribut href. Nemusíme k tomu používat žádný programovací jazyk jako PHP apod. Stačí nám pouze CSS3 vlastnost content:

a:after {
  content: " [" attr(href) "]";
}

Budeme mít tedy dvě hranaté závorky s URL za názvem odkazu:

content attr

content-attr.html

`url`

Jako poslední si uvedeme hodnotu url. Jak jsme si řekli, nastaví nám média na dané URL adrese (obrázek, video, písnička atd.). CSS bude například toto:

p a:after {
    content: url(images/713/html/assets/tick.png);
}

content url

content-url.html

Obrázek jde v pseudo-elementu a content těžko stylovat a je to nepraktické. Pokud byste tam chtěli obrázky, možná bude lepší volba přímo HTML tag <img>.

V další lekci, Počítání v CSS3 pomocí funkce calc(), si ukážeme, co je to funkce calc(), jak funguje a také jakým způsobem se využívá.

Článek pro vás napsal Samuel Hél

Uživatelské hodnocení:

42 hlasů

Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes, svou gf a elektroniku

Aktivity

Lekce 1 - Čítač a vlastnost content v CSS3

counter-increment

Syntaxe

Hodnoty

counter-reset

Hodnoty

content

Syntaxe

Hodnoty

Ukázky použití

counter-increment a counter-reset

content

open-quote a close-quote

attr

url

`counter-increment`

`counter-reset`

`content`

`counter-increment` a `counter-reset`

`content`

`open-quote` a `close-quote`

`attr`

`url`