Kaskádové styly – barvy a pozadí

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.