
Eurotel (20%)


T-Mobile (21%)


Oskar (26%)


Jiný (12%)


Nemám mobil (21%)



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ě:
Jednotka | Název | Česky | Příklad zápisu |
in | inch | palcc | 1,7in |
cm | centimeter | centimetr | 8,5cm |
mm | milimeter | milimetr | 12mm |
pt | point | bod | 12pt |
pc | pica | pica | 13,5pc |
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:
Název barvy | Ukázka |
Black | Ukázka |
Navy | Ukázka |
Blue | Ukázka |
Maroon | Ukázka |
Purple | Ukázka |
Green | Ukázka |
Red | Ukázka |
Teal | Ukázka |
Magenta | Ukázka |
Olive | Ukázka |
Gray | Ukázka |
Lime | Ukázka |
Aqua | Ukázka |
Silver | Ukázka |
Yellow | Ukázka |
White | Ukázka |
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.
Věc | Autor | Datum a čas |
K článku nejsou žádné komentáře. | ||
Zobrazit Vše | Přidat nový |