Lekce 9 - Barvy v CSS

V minulé lekci, Typové CSS selektory a zarovnání textu, jsme si ukázali použití CSS a naučili jsme se zarovnávat text.

V tomto tutoriálu Statického webu budeme pokračovat se stylováním CSS podle selektorů. Dnes se soustředíme na barvu textu a jak ji můžeme různými způsoby zapsat.

Vlastnost color - Barva textu

Ukažme si, jakým způsobem bychom změnili barvu textu. Slouží k tomu CSS vlastnost color. Hodnotu barvy můžeme zadat několika způsoby:

1. textovou konstantou
2. třemi hodnotami RGB
3. jednou hodnotou v šestnáctkové soustavě

Postupně si je projděme.

1. Textové konstanty

Prvním způsobem zadání barvy v CSS je použití barevné konstanty. Máme jich k dispozici 16, jsou to: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white a yellow. Bohužel se jedná o barvy velmi ošklivé a kromě černé a bílé je nemá smysl používat. CSS nabízí mnoho dalších barevných konstant (jmen barev), které však bohužel nejsou součástí oficiální specifikace, a proto by se neměly používat.

Můžeme si zkusit nastavení barvy přidat mezi vlastnosti v selektoru pro nadpisy <h1> a <h2>. Styl bude nyní vypadat takto:

h1, h2 {
    text-align: center;
    color: blue;
}

Pokud je vlastností v selektoru více, jednoduše je píšeme na samostatné řádky. Styl si uložme a obnovme stránku, měli byste vidět něco podobného:

2. RGB

Častějším způsobem je zadat barvu jako RGB (Red, Green, Blue). Pro lepší zapamatování si na úvod uveďme krátký vtip:

Baví se dva webaři:

• Já jsem sbalil novou holku, je krásná, 90-60-90...
• Cože? Tmavě fialová?

Určitě víte, že v počítači má každá barva 3 složky: červenou, zelenou a modrou. To vychází z optiky, jelikož každý bod na vaší obrazovce je složen z různě intenzivních světel těchto barev. Zadáním těchto tří složek namícháme naprosto libovolnou barvu a nejsme tak omezeni barvami, které nám někdo připravil:

Zadání té samé modré jako nabízí konstanta blue by přes RGB vypadalo následovně:

color: rgb(0, 0, 255);

Protože potřebujeme zadat hned 3 hodnoty, musíme použít CSS funkci rgb() a předat barvy v závorce (), oddělené čárkami ,.

První nula výše označuje, že červená složka má hodnotu 0, druhá, že zelená složka má hodnotu 0, poslední, že modrá složka má maximální hodnotu. Tou je 255. Tyto velké rozdíly jsou důvodem, proč výchozí barvy nevypadají dobře, v reálu není nic takto úplně modré.

3. Šestnáctková soustava - HEX

Dostáváme se k poslednímu způsobu zápisu barev. Nelekejte se matematického pojmu, zadávání barev pomocí hexadecimální soustavy je nejjednodušší zápis. Jedná se opět o RGB zápis, který již známe. Jen kromě číslic 0 - 9 používá i písmena A - F. Díky tomu si vystačíme s méně číslicemi a můžeme pak všechny složky barvy uvést jako jednu hodnotu, aniž bychom potřebovali používat CSS funkci rgb().

Úplně modrou barvu bychom zapsali takto:

color: #0000FF;

Zápis barvy v šestnáctkové soustavě začíná mřížkou #, dále následuje dvojice čísel pro každou ze složek RGB (2 pro červenou, 2 pro zelenou a 2 pro modrou). Maximální hodnota 255 se zde zapíše jako FF.

Mřížku # na české klávesnici zapíšeme pomocí Pravého Alt + X:

Můžeme si vyzkoušet, že oba zápisy nám nadpis obarví na tu samou barvu, jako původní konstanta blue.

Ačkoli hodnota je špatně čitelná pro lidi, každý lepší grafický editor (např. Photoshop) nám u barvy ukáže její HTML zápis. Pro výběr barev můžete použít i náš online nástroj Colorpicker, kde jednoduše vyberete barvu a aplikace vám vypíše její HTML notaci.

Pojďme našim nadpisům nastavit takový odstín modré, aby stránka nevypadala jako papoušek:

h1, h2 {
    text-align: center;
    color: #0a294b;
}

Je to taková tmavě modrá, ale stále ne černá, vypadá docela příjemně. A toto je výsledek naší dnešní práce:

V příští lekci, Třídní selektor a stylování textu v CSS, si ukážeme, jak centrovat obrázky pomocí třídního selektoru a změnu fontu písma.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.