9. diel - Farby v CSS
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 to, 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:
- textovou konštantou
- tromi hodnotami RGB
- jednou hodnotou v šestnástkovej sústave
1. Textové konštanty
Prvým spôsobom 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:
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 (R ed, G reen, B lue). Určite viete, že v počítači má každá farba 3 zložky: červenú, zelenú a modrú. Zadaním týchto 3 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:
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
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:
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. 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:
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 nasledujúcom cvičení, Riešené úlohy k 6.-9. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.
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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 200x (2.13 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS