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.

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ší zabnoř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