C týden
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

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

V předchozí lekci, Průběhy animací elementů, jsme si ukázali, jak vypadají přednastavené průběhy animací v CSS a udělali si i vlastní.

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>.


 

Předchozí článek
Průběhy animací elementů
Všechny články v sekci
CSS3
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
1 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 (1)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!