DΘlkovΘ jednotky v CSS

V CSS se mezi Φφslem a znaΦkou jednotky ned∞lß mezera. Nap°φklad font-size: 14pt. Pou╛itelnΘ jednotky jsou px, mm, cm, in, pt, pc, em a ex. Jejich detaily rozeberu nφ╛e. Chcete-li zadßvat desetiny, odd∞lujte teΦkou (jak je zvykem ve sv∞t∞), nikoliv Φßrkou (jak je zvykem v Φesk²ch zemφch).

Pixel

Zßkladnφ dΘlkovou jednotkou je pixel, co╛ je obrazovkov² bod. Zapisuje se px. V HTML (ne v CSS) se v╣echny rozm∞ry (krom∞ procent) udßvajφ v pixelech. Tak╛e pokud nßhodou uvedete dΘlku bez jednotky, prohlφ╛eΦ by to m∞l pochopit jako ╛e je to v pixelech (ale t°eba IE 6 to obΦas nepochopφ a ·daj bez jednotky ignoruje (zji╣t∞no u pozicovßnφ)).

Absolutnφ jednotky

ZnaΦky mm, cm, in, pt a pc p°edstavujφ normßlnφ rozm∞ry znßmΘ z reßlnΘho sv∞ta. Nijak ale nenφ dßno, jak se tyto jednotky zobrazφ v koneΦnΘm efektu (nap°φklad existujφ r∙znß rozli╣enφ obrazovek), podle m²ch zku╣enostφ fungujφ p°esn∞ jenom p°i tisku (tak╛e zas tak "absolutnφ" to nenφ).

TypografickΘ jednotky pt a pc se odvozujφ od anglickΘho palce. V b∞╛nΘm ╛ivot∞ se s nimi nesetkßte, ale nap°φklad pt je ta jednotka, ve kterΘ se udßvß velikost pφsmen v textov²ch editorech typu Wordu.

ZnaΦka	Nßzev	P°evod	PoΦet px *
mm	milimetr		1mm = 3.78px
cm	centimetr	1cm = 10mm	1cm = 37.8px
in	palec (inch)	1in = asi 2,6cm	1in = 96px
pt	typografick² bod	72pt = 1in	3pt = 4px
pc	pica nebo tΘ╛ cicero	1pc = 12pt , 6pc = 1in	1pc = 16px

* P°evod na pixely se podle m²ch pozorovßnφ odvozuje od vztahu 3pt = 4px, kter² nenφ nikde jinde uvßd∞n. Funguje to tak ale p°inejmen╣φm v Exploreru a Navigatoru Φty°kßch.

DoporuΦenφ: vyberte si jednu "oblφbenou" jednotku a v╣echno uvßd∞jte v nφ. ╚asem se velmi dob°e nauΦφte, jak je velkß a co v nφ mßte jak zadat. DoporuΦuji samoz°ejm∞ pixel.

Relativnφ jednotky

Jednotky em a ex m∞nφ svou velikost v zßvislosti na aktußlnφ velikosti pφsma. Aktußlnφ velikost pφsma je ovlivn∞na jednak formßtovacφmi znaΦkami (<big> a pod.), jednak volbou u╛ivatele. V∞t╣ina prohlφ╛eΦ∙ toti╛ umo╛≥uje nastavit velikost zobrazovanΘho pφsma (zobrazit / velikost textu). To je i zßkladnφ v²znam t∞chto jednotek -- umo╛≥ujφ design, kter² se p°i zm∞n∞ tohoto nastavenφ nerozsype. (Jinß metoda je zadat v╣echna pφsma absolutn∞, to ale u╛ivatele akorßt oprudφ.)

JinΘ pou╛itφ je u obtΘkan²ch obrßzk∙: pokud chcete, aby obrßzek byl vysok² stejn∞ jako t°i °ßdky, zadßte k obrßzku style="height: 3em". UrΦit∞ existujφ dal╣φ pou╛itφ, na kterß ale p°ijdete a╛ ve chvφli, kdy je budete pot°ebovat.

ZnaΦka	Nßzev	V²znam
em	eM, ΦtverΦφk	V²╣ka velkΘho pφsmena M
ex	eX	V²╣ka malΘho pφsmena x

Pro IE 4 je 1em = 2ex, v NN je tro╣ku obΘ trochu v∞t╣φ, p°iΦem╛ 1em > 2ex.

Existuje i jednotka en (p∙lΦtverΦφk), kterß je ale nestandardnφ a divn∞ podporovanß.

Procenta

S procenty je v CSS trochu zmatek, ale dß se to pochopit. Zßpis vypadß jako u obyΦejn²ch jednotek: width: 20% t°eba (mezi Φφslem a % nenφ mezera). Jedin²m problΘmem je to, jak se budou procentußlnφ hodnoty interpretovat. Jde prost∞ o to, z Φeho jsou to procenta.

Na tuto otßzku obecnß odpov∞∩ neexistuje. U ka╛dΘ vlastnosti je tomu jinak. V mnoha v²Φtech vlastnostφ a hodnot CSS je sloupeΦek "interpretace procent", ve kterΘm se nalΘzß pokus o specifikaci. Jß to tam nepφ╣u, proto╛e to stejn∞ v∞t╣inou funguje v ka╛dΘm prohlφ╛eΦi jinak.

Na╣t∞stφ existujφ ale jenom t°i zßkladnφ interpretace, kterΘ jsou ve v∞t╣in∞ p°φpadech stejn∞ shodnΘ. Procenta se poΦφtajφ bu∩

co╛, jak jist∞ chßpete, je v mnoha p°φpadech totΘ╛. Slo╛it∞j╣φ zano°enΘ p°φpady se stejn∞ musejφ odzkou╣et. Tak╛e procenta zadßvat doporuΦuji, je to mnohdy velkΘ ulehΦenφ.

P°φklad

Zßpis URL

Je╣t∞ bych m∞l zmφnit, jak se v CSS zapisujφ adresy. Je to pot°eba zejmΘna p°i naΦφtßnφ obrßzkov²ch pozadφ, ale jsou i jinΘ p°φpady.

background-image: url('pozadi.gif');

background-image: url("pozadi.gif");

background-image: url(pozadi.gif);

Obsah

Hledßnφ

Zßkladnφ kurs

Editory

HTML tipy

Provoz webu

CSS styly

P╪EHLED VLASTNOST═ CSS