9. diel - Farby v CSS

V minulej lekcii, Typové CSS selektory a zarovnanie textu, sme si ukázali použitie CSS a naučili sme sa zarovnávať text.

V tomto tutoriále Statického webu budeme pokračovať so štylovaním CSS podľa selektorov. Dnes sa sústredíme na farbu textu a ako ju môžeme rôznymi spôsobmi zapísať.

Vlastnosť color - Farba textu

Ukážme si, akým spôsobom by sme zmenili farbu textu. Slúži na to CSS vlastnosť color. Hodnotu farby môžeme zadať niekoľkými spôsobmi:

1. textovou konštantou
2. tromi hodnotami RGB
3. jednou hodnotou v šestnástkovej sústave

Postupne si ich prejdime.

1. Textové konštanty

Prvým spôsobom zadania farby v CSS je použitie farebnej konštanty. Máme ich k dispozícii 16, sú to: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white a yellow. Bohužiaľ sa jedná o farby veľmi škaredé a okrem čiernej a bielej ich nemá zmysel používať. CSS ponúka mnoho ďalších farebných konštánt (mien farieb), ktoré však bohužiaľ nie sú súčasťou oficiálnej špecifikácie, a preto by sa nemali používať.

Môžeme si skúsiť nastavenie farby pridať medzi vlastnosti v selektore pre nadpisy <h1> a <h2>. Štýl bude teraz vyzerať takto:

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

Pokiaľ je vlastností v selektore viac, jednoducho ich píšeme na samostatné riadky. Štýl si uložme a obnovme stránku, mali by ste vidieť niečo podobné:

2. RGB

Častejším spôsobom je zadať farbu ako RGB (Red, Green, Blue). Pre lepšie zapamätanie si na úvod uveďme krátky vtip:

Bavia sa dvaja webári:

• Ja som zbalil nové dievča, je krásna, 90-60-90...
• Čože? Tmavo fialová?

Určite viete, že v počítači má každá farba 3 zložky: červenú, zelenú a modrú. To vychádza z optiky, pretože každý bod na vašej obrazovke je zložený z rôzne intenzívnych svetiel týchto farieb. Zadaním týchto troch zložiek namiešame úplne ľubovoľnú farbu a nie sme tak obmedzení farbami, ktoré nám niekto pripravil:

Zadanie tej istej modrej ako ponúka konštanta blue by cez RGB vyzeralo nasledovne:

color: rgb(0, 0, 255);

Pretože potrebujeme zadať hneď 3 hodnoty, musíme použiť CSS funkciu rgb() a odovzdať farby v zátvorke (), oddelené čiarkami ,.

Prvá nula vyššie označuje, že červená zložka má hodnotu 0, druhá, že zelená zložka má hodnotu 0, posledná, že modrá zložka má maximálnu hodnotu. Tou je 255. Tieto veľké rozdiely sú dôvodom, prečo východiskové farby nevyzerajú dobre, v reáli nie je nič takto úplne modré.

3. Šestnástková sústava - HEX

Dostávame sa k poslednému spôsobu zápisu farieb. Nezľaknite sa matematického pojmu, zadávanie farieb pomocou hexadecimálnej sústavy je najjednoduchší zápis. Ide opäť o RGB zápis, ktorý už poznáme. Len okrem číslic 0 - 9 používa aj písmená A - F. Vďaka tomu si vystačíme s menej číslicami a môžeme potom všetky zložky farby uviesť ako jednu hodnotu bez toho, aby sme potrebovali používať CSS funkciu rgb().

Úplne modrú farbu by sme zapísali takto:

color: #0000FF;

Zápis farby v šestnástkovej sústave začína mriežkou #, ďalej nasleduje dvojica čísel pre každú zo zložiek RGB (2 pre červenú, 2 pre zelenú a 2 pre modrú). Maximálna hodnota 255 sa tu zapíše ako FF.

Mriežku # na slovenskej klávesnici zapíšeme pomocou Pravého Alt + X:

Môžeme si vyskúšať, že oba zápisy nám nadpis zafarbia na tú istú farbu, ako pôvodná konštanta blue.

Hoci hodnota je zle čitateľná pre ľudí, každý lepší grafický editor (napríklad Photoshop) nám u farby ukáže jej HTML zápis. Pre výber farieb môžete použiť aj náš online nástroj Colorpicker, kde jednoducho vyberiete farbu a aplikácia vám vypíše jej HTML notáciu.

Poďme našim nadpisom nastaviť taký odtieň modrej, aby stránka nevyzerala ako papagáj:

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

Je to taká tmavo modrá, ale stále nie čierna, vyzerá celkom príjemne. A toto je výsledok našej dnešnej práce:

V budúcej lekcii, Triedny selektor a štylovanie textu v CSS, si ukážeme, ako centrovať obrázky pomocou triedneho selektora a zmenu fontu písma.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.