V tomto díle bych rád popsal problematiku nastavování barev pomocí kaskádových stylů CSS. Protože je to ve svém důsledku celkem komplexní problematika, věnuji jí alespoň celý tento díl.

Začnu tedy samotnými barvami. Kaskádové styly dovolují nastavit barvu textu a barvu pozadí téměř každého prvku na stránce. Samotné nastavování je velmi jednoduché a používá vlastnosti s názvem color (pro nastavení barvy textu) a background-color (pro nastavení barvy pozadí). O těchto vlastnostech jsem se již zmínil v předcházejících dílech seriálu.

Pro nastavování barvy pozadí existuje více způsobů, jak určit samotnou barvu. Asi nejjednodušší je použít jméno barvy. Například následující zápis nastaví barvu textu na modrou a barvu pozadí na šedou:

a { color: blue; background-color: gray; }

Pro účely kaskádových stylů je pojmenováno 16 nejběžnějších barev. (A ostatně i pro samotné HTML lze tato jména používat také.) Tyto barvy by měl umět zobrazit každý barevný monitor, i ten nejhorší. V následující tabulce jsou uvedena všechny jména barev (pokud zatím nerozumíte slovu RGB, buďte trpěliví, o několik odstavců dále bude tento termín podrobněji vysvětlen):

normalizovaný název český název RGB hodnota ukázka
black černá #000000
silver světle šedá #C0C0C0
gray tmavě šedá #808080
white bílá #FFFFFF
maroon rezavě červená #800000
red červená #FF0000
purple tmavě fialová #800080
fuchsia lila #FF00FF
green tmavě zelená #008000
lime světle zelená #00FF00
olive olivově zelená #808000
yellow žlutá #FFFF00
navy tmavě modrá #000080
blue světle modrá #0000FF
teal šedomodrá #008080
aqua tyrkysová #00FFFF


Podíváte-li se pozorně na tabulku, zjistíte, že barva označená jako green, což je v překladu zelená vypadá trochu podezřele. Osobně bych jako zelenou čekal spíše barvu označenou lime. Zde si myslím, že došlo k překlepu návrhářů normy tím spíše, že i RGB hodnota odpovídá mé domněnce. Barva označená normou jako green má totiž 50% zelené, zatímco barva lime má 100% zelené. Takže si opravdu myslím, že jde o překlep při návrhu normy barev. Bohužel, co je psáno, to je dáno, a jak jsem si vyzkoušel, opravdu to tak pracuje. Pozor na to, neznalost tohoto faktu vám může přinést nečekané výsledky, kdy se divíte, co se vám vlastně zobrazuje jako barva green.

Nechme již názvy barev na pokoji a pokročme dále. Všecny další způsoby určování barev používají RGB systém. Mnozí z vás ho již znáte, pro ty ostatní malé vysvětlení. RGB soustava určuje barvu tak, že jí namíchá ze tří barevných světel, červeného, zeleného a modrého. Odtud i název systému RGB, který se skládá z anglických názvů Red, Green, Blue (červená, zelená, modrá).

Pokud jste někdo malířsky nadaný, upozorním na rozdíl mezi mícháním barev a mícháním světel. Jde o to, že když mícháte barvy, tak vlastně nepracujete s přímým světlem, ale se světlem odraženým od barev na papíře. A tento rozdíl je dosti podstatný. Při míchání světla přidáním každého dalšího světla (s různou barvou) se blížíte k bílé barvě. Při míchání barev na papíře vlastně každá složka barvy pohlcuje nějakou část světla. Proto čím více barev smícháte, tím více světla je pohlceno a blížíte se k černé barvě. Proto také RGB systém se používá tam, kde se míchají světla jako je třeba na monitorech či v televizní technice. Tam, kde se tiskne na papír se používají jiné systémy.

Takže začínáme s určováním barev pomocí RGB systému. Asi pro uživatele neprogramátora je nejvíce srozumitelný následující zápis:

b { color: rgb(50%,20%,75%); }

Význam tohoto zápisu je: Ať všechny texty uzavřené uvnitř značky b mají barvu, kterou dostanu, když smíchám 50% červené barvy, 20% zelené barvy a 75% modré barvy. Podle mých zkušeností si tento zápis získává sympatie lidí více, než další možnosti, které uvedu. Pokud nejste programátoři, vřele vám ho doporučuji, protože vám umožní využít všechny možnosti určení barvy, a přitom je to celkem přirozený způsob. Další možností je namísto procent určit poměr barev číslem v rozsahu od 0 do 255. Je celkem zřejmé, že 0 znamená, že tam není ani stopa barvy, 255 naopak znamená, že je tam maximum barvy. Uvedu malý příklad:

i { background-color: rgb(0,200,255);}

Zápis znamená, že pozadí textu, který je uzavřený uvnitř značky i bude nastaveno na barvu, kterou získám, když smíchám 0 dílů červené barvy, 200 dílů zelené barvy a 255 dílů modré barvy. I tento způsob určení barvy je celkem přirozený i pro obyčejné uživatele, a proto ho mohu jenom doporučit.

Další možnosti určení barev vycházejí z předchozího způsobu, kdy se určují jednotlivé složky barev číslem v rozsahu 0 až 255. Jako relikvie se v dalších způsobech vyskytuje šestnáctková soustava, kterou znají zejména programátoři. V podstatě jde o to, že v lidském světě se běžně používá desítková soustava. My, lidé ji používáme naprosto běžně, a většina lidí si ani neuvědomuje, že existují i jiné číselné soustavy. A koneckonců pro mnoho lidí ani znalost jiných soustav praktickým význam nemá. V desítkové soustavě počítáme vše v běžném lidském životě. Pro počítače je naopak počítání v desítkové soustavě dost nepraktické, a proto se zavedly jiné soustavy. Podrobnější povídání přesahuje rámec tohoto seriálu, spokojím se s faktem, že mezi programátory se stala velmi oblíbená šestnáctková soustava, která kromě na rozdíl od desítkové používá šestnáct číslic. Jednak se používají číslice 0 až 9 a k tomu navíc jako číslice písmena A až F.

Se šestnáctkovou soustavou souvisí následující způsob, který je převzatý z jazyka HTML:

p { color: #2F3A60; }

Tento způsob urční barvy obsahuje znak # a za ním šest znaků, kdy první dva znaky představují počet dílů červené barvy, druhá dvojice znaků počet dílů zelené barvy a poslední dvojice počet dílů modré barvy. Problém je v tom, že počet dílů barvy je určen číslem v šestnáctkové soustavě. Jak si můžete všimnout, číslo v šestnáctkové soustavě může obsahovat i písmena A až F. Vzhledem k tomu, že tento způsob je klasický a chtěl bych ho zpřístupnit i neprogramátorům, uvádím zde tabulku pro převod mezi šestnátkovou soustavou a desítkovou soustavou:

  0 1 2 3 4 5 6 7 8 9 A B C D E F
0? 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1? 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
2? 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
3? 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
4? 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
5? 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
6? 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
7? 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
8? 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
9? 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
A? 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
B? 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
C? 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
D? 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223
E? 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239
F? 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255


Tabulka se používá velmi jednoduše. Například zkusme pomocí této tabulky rozkódovat zápis z posledního příkladu, kdy jsme barvu určili jako #2F3A60. Jak jsme uvedli, první dva znaky, tedy 2F značí, kolik potřebujeme dílů červené barvy. Najdeme tedy v tabulce řádek začínající 2? a sloupec začínající F. Řádek i sloupec nám ukáže políčko s číslem 47. Víme tedy, že máme vzít 47 dílů červené barvy. Další dva znaky, tedy 3A znamená počet dílů zelené barvy, a z tabulky snadno zjistíme, že jde o 58 dílů. A poslední dvojice znaků, tedy 60 snadno převedeme pomocí tabulky na 96 dílů modré barvy.

A jako poslední způsob je možný následující zápis, který asi budete používat jenom velice zřídka:

tt { color: #23A;}

Tento styl snadno rozluštíme tak, že každý znak zdvojíme, tedy #23A si představíme jako #2233AA.

A teď, jako téměř v každém díle něco o omezeních. RGB systém vám umožňuje určit téměř 17 miliónů různých barev. Je celkem jasné, že ne každý počíatč je všechny může zobrazit. I když technický pokrok již pokročil, a většina počítačů s tím nemá problémy. Pokud máte starší počítač, můžete mít možnost zobrazit jenom 16 barev, případně jenom 256 barev. Většina dnešních počítačů ovšem umí zobrazit všechny barvy. Zde jde ale o to, že uživatel může z různého důvodu nastavit režim, který počet barev omezuje. Nejčastější počty barev jsou 16, 256, 65536 a všech 16777216.

Pro případ zobrazení vašich stránek a dokumentů na počítačích, které neumožňují zobrazit plný počet barev se používají takzvané bezpečné barvy. Najčastěji se tvůrci stránek při profesionální práci snaží, aby jejich práci bylo možné zobrazit na počítači, který umí 256 barev.

Žádný příspěvek v diskuzi

Odpovědět