CSS - dΘlkovΘ jednotky, urΦovßnφ barev

Tento Φlßnek detailn∞ popisuje d∙le╛it² dopln∞k CSS a tφm jsou dΘlkovΘ jednotky. P°edstavφme se jednotky absolutnφ, relativnφ i procentußlnφ urΦovßnφ. TakΘ nezapomeneme na definovßnφ barev.

DΘlkovΘ jednotky

DΘlkovΘ jednotky se d∞lφ na absolutnφ a relativnφ. Do t∞ch relativnφch pat°φ em, ex a paradoxn∞ i jeden pixel. Do absolutnφch pak °adφme v╣echny ostatnφ.

Pixel

Pixel pat°φ mezi relativnφ jednotky proto, ╛e jeho skuteΦnß velikost zßvisφ na rozli╣enφ monitoru. Zapisujeme ho Φφslem a p°φponou px:

div { width: 50px }

em

Jeden em reprezentuje ╣φ°ku velkΘho pφsmene M. TaktΘ╛ se °adφ mezi relativnφ jednotky, proto╛e jeho skuteΦnß dΘlka pln∞ zßvisφ na nastavenΘ velikosti textu. Zapisuje se Φφslem a p°φponou em, m∙╛eme pou╛φvat i Φφsla desetinnß.

div { width: 13,5em }

ex

Jeden ex zase reprezentuje v²╣ku malΘho pφsmene x. Jako v p°edchozφm p°φpad∞ se jednß o jednotku relativnφ, jeho skuteΦnß dΘlka pln∞ zßvisφ na nastavenΘ velikosti textu. Zapisuje se Φφslem a p°φponou ex, i zde m∙╛eme pou╛φvat Φφsla desetinnß.

div { width: 13,5ex }

Absolutnφ jednotky

Jeliko╛ pravidla pro absolutnφ jednotky jsou zhruba stejnß (v╛dy se zapisuje Φφslem a nßzvem jednotky, Φφsla mohou b²t i desetinnß), ukß╛eme si je v╣echny pohromad∞:

Procenta

ObΦas si s p°edchozφmi dΘlkov²mi jednotkami prost∞ nevystaΦφme, nebo jsou pro dan² p°φpad p°φli╣ slo╛itß. V t∞chto p°φpadech m∙╛eme v∞t╣inou pou╛φt i procentußlnφ zßpis, s tφm, ╛e 100% je dΘlka danΘ vlastnosti v p°φpad∞, ╛e by nebyla uvedena. Zßpis se provßdφ Φφslem a znakem %:

div { width: 150% }

Barvy

Zßpis barvy lze provßd∞t rozliΦn²mi zp∙soby, poj∩me se na n∞ podφvat:

Zßpis nßzvem barvy

Zßpis nßzvem barvy se pou╛φvß velmi mßlo, je k tomu ale takΘ pßsn² d∙vod. Jedna takto zapsanß barva toti╛ m∙╛e vypadat jinak v jednom prohlφ╛eΦi tak a v druhΘm zase jinak. Existuje asi 140 barev, kterΘ lze takto zapsat, ale relativn∞ spolehlivΘ zobrazenφ lze Φekat jen u 16 zßkladnφch:

P°φklad zßpisu pomocφ nßzvu:

p { color: red }

Zßpis RGB

Barvu takΘ m∙╛eme zapsat pomocφ RGB. Ten spoΦφvß v nastavenφ intenzity ΦervenΘ, zelenΘ a modrΘ Φφslem 0 - 255. Toto nastavenφ se zapisuje nßsledujφcφm zp∙sobem:

rgb(cervena,zelena,modra)

P°φklad

p { color: rgb(140,68,0) }

Hexadecimßlnφ zßpis

Hexadecimßlnφ zßpis barvy je bez nadsßzky nejpou╛φvan∞j╣φ. Sv²m principem se podobß zßpisu RGB, mφsto Φφsel 0-9 se ale pou╛φvajφ hexadecimßlnφ znaky, tedy 0123456789ABCDEF. P°ed cel² zßpis pak vlo╛φme m°φ╛ku #. Existujφ dv∞ varianty RGB zßpisu. Tou prvnφ, nejpou╛φvan∞j╣φ je zßpis po dvou znacφch, tedy #╚╚ZZMM (╚ = Φervenß, Z = zelenß, M = modrß). M∙╛eme ale zapisovat takΘ po jednom znaku, tedy #╚ZM, co╛ omezuje v²b∞r na safe-colors, tedy tzv. bezpeΦnΘ barvy. To jsou barvy, kterΘ by se m∞li v ka╛dΘm prohlφ╛eΦi zobrazit ·pln∞ stejn∞.

P°φklad zßpisu #╚╚ZZMM:

p { color: #A48000 }

P°φklad zßpisu #╚ZM:

p { color: #A80 }

Kouzlo prvnφ varianty je v tom, ╛e se dß jednodu╣e p°evßd∞t mezi RGB zßpisem pomocφ obyΦejnΘ kalkulaΦky, kterß podporuje hexadecimßlnφ soustavu.

Marek Soldßt, marek@soldat.cz

Autor je ╣Θfredaktorem serveru Einstein.cz.