12. diel - Čítač a vlastnosť content v CSS 3

V minulej lekcii, Rotácia elementov , sme si ukázali, ako možno otáčať elementy v 2D a 3D priestore. Využili sme pri tom funkcie matrix(), rotate() a skew().

V dnešnej lekcii si ukážeme takú dynamickú vlastnosť counter-increment a content.

counter-increment

Ako už z názvu môžeme spoznať, ide o čítač. K číslu tak môžeme pripísať vlastnú hodnotu a tvoriť tak napríklad zoznamy. Vlastnosť sa dedia.

Syntaxe

Syntax je jednoduchá, ako u každej jednoduché vlastnosti, čiže vlastnost: hodnota.

Hodnoty

Najskôr si uvedieme hodnoty, ktorú môže vlastnosť nadobúdať:

• none (predvolené) - Nič sa nepočíta.
• ID číslo - ID predstavuje meno počítadla a číslo hodnotu, o ktorú sa bude zväčšovať (predvolená hodnota je 1). ID musí byť definované vlastností counter-reset, aby sa nastavilo na hodnotu 0 a my mohli pričítať. Túto vlastnosť si ukážeme za chvíľu.
• initial - Nastaví vlastnosť na predvolenú hodnotu (teda na none).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Ukážka bude až ku koncu, pretože musíme najskôr prebrať súvisiace vlastnosti:) Pre vypísanie musíme použiť vlastnosť content. Na ňu príde čas za chvíľu.

counter-reset

Najskôr sa pozrieme na vlastnosť counter-reset, vďaka ktorej definujeme ID počítadla a zároveň ho resetujeme. Vlastnosť sa dedia rovnako ako counter-increment. Syntax je opäť rovnaká.

Hodnoty

Hodnoty vlastnosti counter-reset sú nasledujúce:

none (predvolené) - Žiadne počítadlo sa neresetuje. ID číslo - ID predstavuje meno počítadla a číslo hodnotu, na ktorú sa počítadlo resetuje (predvolená hodnota je 0). initial - Nastaví vlastnosť na predvolenú hodnotu (teda na none). inherit - Hodnota sa zdedí z rodičovského elementu.

Pre pripísanie môžeme použiť už spomínanú vlastnosť counter-increment a pre vypísanie čísla vlastnosť content, ktorú si tiež teraz uvedieme.

content

Pomocou CSS 3 vlastnosti content nastavujeme, čo bude pred a za elementom pomocou pseudo-elementov :before a :after. Vlastnosť sa dedí, rovnako ako predchádzajúce.

Syntaxe

Vlastnosť content môžeme deklarovať niekoľkými spôsobmi. Ak chceme nastaviť len jednu vec (napr. Text), napíšeme iba jednu hodnotu:

content: "Vlastní text.";

Ak by sme chceli definovať viac hodnôt, stačí ich len napísať za seba a nemusíme tieto hodnoty nejako spájať plusom alebo niečím iným, ako napríklad u programovacích jazykov. Vlastnosti pre daný atribút sa vypisujú v poradí, v ktorom sú deklarované hodnoty:

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

Hodnoty

Máme nasledujúce hodnoty vlastnosti content:

• normal (predvolené) - nenastáva žiadny text a všetko sa vypisuje rovnako ako pred použitím tejto hodnoty.
• none - Nič sa nevypíše.
• counter - Nastaví aktuálne číslo počítanie (musí byť nastavená vlastnosť counter-increment).
• attr(atribut) - Nastaví atribút daného elementu.
• text - Vypíše daný text.
• open-quote - Nastaví začínajúcich úvodzovky.
• close-quote - Nastaví uzatvárajúce úvodzovky (musí byť nastavená Predošlá hodnota).
• no-open-quote - Odstráni začínajúce úvodzovky (musí byť nastavená hodnota open-quote).
• no-close-quote - Odstráni uzatvárajúce úvodzovky (musí byť nastavená hodnota close-quote).
• url(adresa) - Nastaví média na danej URL adrese (obrázok, video, pesnička atď.).
• initial - Nastaví vlastnosť na predvolenú hodnotu (teda na normal).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Ukážky použitia

Najprv si teda ukážeme vlastnosť counter-increment. Využijeme pri tom však aj vlastnosť counter-reset a content.

counter-increment a counter-reset

Vytvoríme si zoznam pomocou nadpisov. Nadpisy najvyššej úrovne budú mať počítadlo pod názvom kategórie a počítadlo druhej úrovne sa bude volať podkategórie. Toto počítadlo budeme po vypísaní všetkých nadpisov druhej úrovne resetovať:

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 vyzerať 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 prehliadači sa nám zobrazí toto číslovanie:

Čo keby sme chceli rímske číslice namiesto arabských? Nie je problém, vyriešime to pomocou druhého tvrdenia u hodnoty counter takto:

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

Všimnite si hodnoty upper-roman ako druhý argument. To umiestnime všade, kde chceme rímska číslica. Ja to nastavím iba u kategórie, ako výsledok budeme mať teda rímske čísla:

content

Vlastnosti counter-reset a counter-increment máme teda za sebou. Teraz sa pozrieme bližšie na content, pretože nám ponúka viac možností, ako napríklad len pre zoznam.

open-quote a close-quote

Pre príklad si vytvoríme 2 odseky textu, ktorý obalíme do úvodzoviek. Pred úvodzovky s textom však vložíme vlastný text, ten sa bude opakovať. Najskôr sa pozrieme na CSS:

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

CSS by bez HTML bolo stratené, preto si uvedieme tiež prí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>

Vo výsledku sa nám zobrazí text pred odseku, potom nasleduje úvodzovky a text odseku (z HTML). Potom sa ukončí úvodzovky:

attr

Hodnota attr môže byť veľmi zaujímavá, na použitie je tiež jednoduchá. Vytvoríme si nasledujúce 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 atribút href. Nemusíme k tomu používať žiadny programovací jazyk ako PHP apod. Stačí nám iba CSS 3 vlastnosť content:

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

Budeme mať teda dve hranaté zátvorky s URL za názvom odkaze:

url

Ako posledný si uvedieme hodnotu url. Ako sme si povedali, nastaví nám médiá na danej URL adrese (obrázok, video, pesnička atď.). CSS bude napríklad toto:

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

Obrázok ide v pseudo-elementu a content ťažko stylovať a je to nepraktické. Ak by ste tam chceli obrázky, možno bude lepšia voľba priamo HTML tag <img>.

V ďalšej lekcii, Počítanie v CSS pomocou funkcie calc () , si ukážeme, čo je to funkcia calc(), ako funguje a tiež akým spôsobom sa využíva.