PyLadies: Kurz webového frontendu

Třídy

Jak odlišit elementy?

Udělat text všech odstavců modře už umíš.

<p>A víte, že…?</p>

<p>Ještě jeden odstavec</p>
p { color: blue; }

A víte, že…?

Ještě jeden odstavec

Ale co kdybych chtěl udělat jen první odstavec modrý?

Řešením je přidat třídu, která umožňuje se zaměřit v CSS přesněji. Třída se v HTML přidává jako atribut class

<p class="tip">A víte, že…?</p>

<p>Ještě jeden odstavec</p>

… a v CSS se zapíše s tečkou na začátku

.tip { color: blue; }

A víte, že…?

Ještě jeden odstavec

Jednu třídu lze použít pro více elementů

Třídu můžeš přiřadit libovolnému počtu prvků.

<h1 class="tip">Tip</h1>

<p class="tip">A víte, že…?</p>

<p>Ještě jeden odstavec</p>
.tip { color: blue; }

Tip

A víte, že…?

Ještě jeden odstavec

Třída se tedy použije pokud má nějaký prvek speciální vlastnosti nebo se skupina vlastností opakuje a chceme si tak ušetřit opakovaný zápis v CSS.

Třída jen pro určitý element

Můžeš se setkat i s tímto zápisem:

h1.tip { color: blue; }

p.tip { color: deepskyblue; }

Tip

A víte, že…?

První selektor vybere pouze <h1> s třídou tip a druhý pouze odstavce s toutéž třídou. Je dobré o tom vědět, ale příliš nepoužívat, protože se snadno stane, že je potřeba typ prvku v HTML změnit a pak musíš přepisovat i CSS.

Vícenásobné třídy

Tříd můžeme jednomu prvku přiřadit více najednou, oddělujeme je mezerou.

.tip { color: red; }

.cool { background-color: skyblue; }
<p class="tip">Jsem Tip</p>
<p class="cool">Já jsem cool</p>
<p class="cool tip">Já jsem oboje, heč.</p>
<div class="tip cool">To je toho, já taky.</div>

Jsem Tip

Já jsem cool

Já jsem oboje, heč.

To je toho, já taky.

Aby toho nebylo málo, lze také vybrat pouze prvky, které mají třídy zároveň.

Když pro stejné HTML napíšeme tohle CSS

.tip { color: red; }

.cool { background-color: skyblue; }

.tip.cool { text-align: center; }

Jsem Tip

Já jsem cool

Já jsem oboje, heč.

To je toho, já taky.

Tak se vycentruje text pouze pro elementy, které mají obě třídy zároveň. A opět platí, že na pořadí nezaleží.

Cvičení

Zkus si změnit stylování v tvém dokumentu pomocí elementů na stylování pouze pomocí tříd.

Pseudotřídy

Pseudotřídy vybírají prvky v různých stavech.

a { color: navy; }

a:link { color: blue; } /* nenavštívený */

a:visited { color: purple; } /* navštívený */

a:hover { color: red; } /* najetí myší */

a:focus { color: green; } /* aktivace klávesnicí nebo myší */

a:active { color: yellow; } /* při aktivaci (např. kliknutím) */

Zatímco třídy si definuješ jako autor kódu ty, pseudotřídy jsou dané.

Narozdíl od tříd se zapisují jen do CSS, na HTML není třeba sahat.

Je potřeba dodržet pořadí jejich zápisu v CSS, aby fungovaly správně.

Pseudoelementy

Podobný zápis mají i pseudoelementy, tedy selektory, které vybírají specifikací definované části elementu.

Jejich syntaxe je podobná jako u pseudotříd, jen se u nich píšou dvě dvojtečky.

Například jde vybrat první písmeno (::first-letter).

Asi nejpraktičtější je ale generovaný obsah přes ::after a ::before a využití definice obsahu pomocí vlastnosti content:

<p>Haló</p>
.example-before-after::before {
    content: '☎';
    color: red;
    margin-right: 0.3em;
}

.example-before-after::after {
    content: '';
    height: 1em;
    width: 10em;
    display: inline-block;
    background-color: green;
    vertical-align: middle;
}

Haló

Přes ::before je vložen element s obsahem ikony a je obarven červeně.

Přes ::after je vložen prázdný element, který je obarvený a má nastaveny rozměry.

Můžeš díky tomu mít čistý HTML kód, do kterého tyto vizuální prvky přidáváš jen pomocí CSS.