Barvy v HTML

Barvit se m∙╛e pφsmo, pozadφ a okraje. Pominu-li zatφm CSS (kaskßdovΘ styly), d∞lß se to v HTML v╛dy zßpisem




<tag atribut="barva">.

Poznßmka: pokud pro tvorbu strßnek pou╛φvßte n∞jak² wysiwyg editor, nepot°ebujete zßpis∙m barev rozum∞t, proto╛e editor v∞t╣inou dß barvy vybrat my╣φ a pak je zapφ╣e sßm.

Mo╛nosti zßpisu barvy

Zp∙sob zßpisu	P°φklad: ΦervenΘ pφsmo	Poznßmka
JmΘnem v angliΦtin∞	`<font color="red">`	Existuje mnoho "pojmenovan²ch" barev.
Procentußlnφm RGB zßpisem	`<font color="rgb(100%,0%,0%)">`	(rgb znamenß Red Green Blue)
Desetin²m RGB zßpisem	`<font color="rgb(255,0,0)">`
⌐estnßctkov²m RGB zßpisem	`<font color="#ff0000">`	Tento zp∙sob je nejjist∞j╣φ, nejpou╛φvan∞j╣φ a nejlep╣φ.

PojmenovanΘ barvy

AΦkoliv se dnes uvßdφ n∞kolik desφtek pojmenovan²ch barev, je dobrΘ dr╛et se zßkladnφch ╣estnßcti windowsßck²ch barev. Jsou to black, white, green, maroon, olive, navy, purple, gray, yellow, lime, aqua, fuchsia, silver, red, blue a teal. Hlavnφ v²hoda tohoto zadßvßnφ spoΦφvß ve snadnΘ zapamatovatelnosti, nemusφte analyzovat sv∞telnΘ slo╛ky.

Jako v╣ude v HTML nemusφte dßvat pozor na velkß pφsmena, RED funguje stejn∞ dob°e jako red nebo ReD.

RGB model

RGB znamenß red green blue, Φili Φervenß zelenß modrß. LidskΘ oko chßpe ka╛dΘ barevnΘ sv∞tlo jako sm∞s t°φ slo╛ek:

Stejn²m zp∙sobem jsou barvy tvo°eny na monitoru. Kdy╛ se na zapnut² monitor podφvßte lupou, uvidφte ΦervenΘ, zelenΘ a modrΘ body (nemßte-li lupu, staΦφ si na monitor plivnout). Rozsvφcenφm sousednφch bod∙ r∙znou kombinacφ intenzit se tvo°φ barvy. Nap°φklad ╛lutß barva se vytvo°φ rozsvφcenφm zelen²ch a Φerven²ch bod∙, kdy╛ modrΘ z∙stanou zhasnutΘ.

RGB v HTML funguje ·pln∞ stejn∞. ╪φkß, jak moc se majφ rozsvφtit ΦervenΘ, zelenΘ a modrΘ body na obrazovce. Nap°φklad modrß barva se dß procentußln∞ napsat jako rgb(0%,0%,100%), proto╛e v nφ nenφ ╛ßdnΘ ΦervenΘ sv∞tlo (to je ta prvnφ nula), ╛ßdnΘ zelenΘ sv∞tlo (druhß nula) a je v nφ naplno modrß (100%). «lutß by byla rgb(100%,100%,0%) nebo╗ je tvo°ena Φerven²m a zelen²m sv∞tlem.

Myslφm, ╛e procentußlnφ zßpis je natolik z°ejm², ╛e jej nebudu dßle rozvφjet. Navφc si nejsem jist², zda je podporovßn v╣emi prohlφ╛eΦi. Nejlep╣φ je zßpis ╣estnßctkov², nap°ed ale vylo╛φm jednodu╣╣φ desφtkov². Pokud mßte rad∞ji praxi ne╛ teorii, podφvejte se na tabulku zßkladnφch barev, ve kterΘ jsem vypsal p°φklady vΦetn∞ grafick²ch slo╛ek barev.

Desφtkov² RGB zßpis

Namφsto procent se v desφtkovΘm zßpisu pou╛φvajφ Φφsla od 0 do 255, kde 0 odpovφdß 0% a 255 je 100%. Nap°φklad zelenß barva, kterß mß procentußln∞ rgb(0%,50%,0%), se desφtkov∞ zapφ╣e jako rgb(0,128,0). ProΦ je maximum zrovna 255? To vypl²vß z toho, jak poΦφtaΦe zachßzejφ s informacemi. Pro ╣kßlovßnφ intenzity pixelu majφ (v hi color) vymezeno 8 bit∙, co╛ znamenß 2⁸ = 256 mo╛nostφ. Proto╛e tam pat°φ i nula, tak maximum je 255.

Desφtkov² zßpis se v praxi p°φli╣ nepou╛φvß, ale je dobrΘ jej pochopit, jinak z∙stane zßhadou i nejpou╛φvan∞j╣φ zßpis ╣estnßctkov².

⌐estnßctkov² (hexadecimßlnφ) zßpis barvy

ZaΦφnß se v╛dy dvojk°φ╛kem (#, na ΦeskΘ klßvesnici prav² alt+X), za kter²m nßsleduje ╣est znak∙. Prvnφ dva znaky pat°φ ΦervenΘ (red), prost°ednφ dva zelenΘ (green) a poslednφ dva modrΘ (blue). Symbolicky to lze zapsat takto: #╚╚ZZMM, nebo chcete-li anglicky #RRGGBB. Ka╛dß dvojice znak∙ je Φφslo v ╣estnßctkovΘ soustav∞. Nejvy╣╣φ hodnotou je zde FF (odpovφdß 100%), nejni╛╣φ 00. (FF je 15 . 16 + 15 = 255)

Nap°φklad modrß barva je #0000FF. «ßdnß Φervenß ani zelenß, jenom naplno modrß.

Kdo nerozumφ ╣estnßctkovΘ soustav∞, m∙╛e pro n∞j b²t tento zßpis na prvnφ pohled zßhadn². D∙le╛it² je v tΘ dvojici znak∙ v╛dycky ten prvnφ, druh² jenom drobn∞ ╣kßluje. ╚φm je ten prvnφ znak vy╣╣φ, tφm vφce barva svφtφ. P°itom znak A odpovφdß Φφslu 10, B = 11, C = 12, D = 13, E = 14, F = 15. Nelamte si s tφm hlavu, nechte to ko≥ovi, mß ji v∞t╣φ. Za chvφli pochopφte, ╛e se to p°i pou╛φvßnφ "bezpeΦn²ch barev" zjednodu╣φ.

Zkrßcen² zßpis

Proto╛e se oba znaky zastupujφcφch jedno sv∞tlo Φasto zapisujφ stejn²m znakem, existuje zkrßcenß varianta zßpisu. Mφsto ╣esti znak∙ se pou╛ijφ jenom 3. Pak symbolicky barva #RGB odpovφdß barv∞ #RRGGBB.

Nap°φklad bφlß barva, kterß se normßln∞ zapisuje #FFFFFF, se dß zapsat takΘ #FFF.

BezpeΦnΘ barvy

Star╣φ monitory nebo grafickΘ karty, kter²ch je ale stßle v provozu hodn∞, dokß╛φ zobrazovat jenom n∞kterΘ barvy. V╣echny ostatnφ barvy se sna╛φ napodobovat kropenatou plochou (dithering), co╛ se ale mnohdy neda°φ. Na╣t∞stφ existujφ barvy, kter²m se °φkß bezpeΦnΘ a kterΘ dokß╛φ star╣φ monitory zobrazit bez problΘm∙. ╪φkß se tomu Netscape paleta.

Tyto barvy majφ v ╣estnßctkovΘm zßpisu pro ka╛dou barvu pouze ╣est mo╛n²ch hodnot: 00, 33, 66, 99, CC nebo FF. Nap°φklad #33CC66 je bezpeΦnß barva (nazelenalß). V procentußlnφm zßpisu se mohou pou╛φvat nßsobky 20%, co╛ odpovφdß nßsobk∙m Φφsla 51 v zßpisu desetinnΘm.

Dßle k bezpeΦn²m barvßm pat°φ ╣estnßct odstφn∙ ╣edi (#xxxxxx, kde x je 0 a╛ F). N∞kdy se udßvß, ╛e k bezpeΦn²m barvßm pat°φ tΘ╛ zßkladnφ barvy Windows.

BezpeΦnΘ barvy by se sprßvn∞ m∞ly pou╛φvat i ve v╣ech souborech gif. (U jpg je to jedno.)

Zßpis barev v CSS

Zatφmco v normßlnφm HTML se zapisuje (symbolicky)

<tag
vlastnost="barva>

, v CSS je to
<style> tag {vlastnost: barva} </style> nebo
<tag style="vlastnost: barva">.

Pro zßpis "barvy" platφ v╣e, co bylo °eΦeno v²╣e, i zde jsou tedy ty Φty°i zp∙soby. (Za zmφnku stojφ, ╛e se barva nedßvß do uvozovek, tak ji Netscape nepoznß.) Nap°φklad obarvenφ v╣ech nadpis∙ druhΘ ·rovn∞ na zeleno se d∞lß takto:

<style>


h2 {color: #009900}


</style>

Obsah

Hledßnφ

Zßkladnφ kurs

Editory

HTML tipy

Provoz webu

CSS styly

P╪EHLED VLASTNOST═ CSS

Zßpis barev v HTML