Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
PHP týden

Lekce 12 - Čítač a vlastnost content v CSS 3

V minulé lekci, Rotace elementů v CSS 3, jsme si ukázali, jak lze otáčet elementy ve 2D a 3D prostoru. Využili jsme při tom funkce matrix(), rotate() a skew().

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Pomocí CSS 3 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 CSS 3 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 CSS pomocí funkce calc(), si ukážeme, co je to funkce calc(), jak funguje a také jakým způsobem se využívá.


 

Předchozí článek
Rotace elementů v CSS 3
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
2 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 a svou gf
Aktivity (3)

 

 

Komentáře

Avatar
Yuriy Tretyachenko:21. února 23:05

Je to zvlastni. Tady v popisu hodnot counter-increment: "none (výchozí) - Nic se nepočítá." Pak kdyz na w3schools.com to vyzkousim a zadam counter-increment: my-sec-counter none;, tak se chova jako by to bylo counter-increment: my-sec-counter 1; a klidne pocita

 
Odpovědět
21. února 23:05
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na Yuriy Tretyachenko
Samuel Hél:23. února 14:08

To bude tím, že CSS bere první hodnotu my-sec-counter, čili druhé slovo none nebere ani v úvahu. Zkus tyto dvě hodnoty přehodit a nepůjde to. Jinak řečeno, vytváříš nevalidní kód, ale prohlížeč ho prostě nějak upraví :)

 
Odpovědět
23. února 14:08
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.