| Einstein.cz | O Životě.cz | All4web | Chat4U | Soldát.cz |
Tvorba WWW
 
Odběr emailů

Aktuality
Články
 
 
Partnerské weby
 JakNaWeb.com - vše pro tvorbu webu - HTML, PHP, MySQL, ASP, CSS,
XML, JavaScripty, PHP
 
Informace o serveru
šéfredaktor
Marek Soldát

hostujeme u
WEB4U

kontaktní email
marek@soldat.cz

ISSN 1214-0082
 
Hledání
 
 
 
Anketa
Jakého používáte mobilního operátora?

Eurotel (20%)


T-Mobile (21%)


Oskar (26%)


Jiný (12%)


Nemám mobil (21%)



Celkem hlasovalo 110 lidí.
 
Co s článkem ?
 
Už jste četli...?
 
Ikonka serveru
 

CSS - délkové jednotky, určování barev

vydáno : 04. 02. 2003, autor : Marek Soldát, kategorie : Tvorba WWW - CSS

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ě:

JednotkaNázevČeskyPříklad zápisu
ininchpalcc1,7in
cmcentimetercentimetr8,5cm
mmmilimetermilimetr12mm
ptpointbod12pt
pcpicapica13,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 barvyUkázka
BlackUkázka
NavyUkázka
BlueUkázka
MaroonUkázka
PurpleUkázka
GreenUkázka
RedUkázka
TealUkázka
MagentaUkázka
OliveUkázka
GrayUkázka
LimeUkázka
AquaUkázka
SilverUkázka
YellowUkázka
WhiteUká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.

Fotografie autora
Marek Soldát, marek@soldat.cz
Autor je šéfredaktorem serveru Einstein.cz.
 
Tento článek je součástí seriálu CSS
 
Komentáře
VěcAutorDatum a čas

K článku nejsou žádné komentáře.

Zobrazit Vše | Přidat nový