Délkové jednotky v CSS

Zápis délky - Pixel - Absolutní jednotky - Relativní jednotky - Procenta - Příklad - Zápis URL

Zápis délky

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.

* Převod pt na pixely je závislý na nastavení systémového zobrazení. Normálně jsou monitory nastavené na 96 dpi (96 px na palec), což při 72 pt na palec dává vztah 3pt = 4px. Uživatel si může dpi monitoru změnit (např. ve Windows Ovládací panely > Zobrazení > Nastavení > Upřesnit > Velikost písma > jiný, 100% pak odpovídá 96 px), potom poměr 3pt = 4px nemusí platit. (Za osvětlení problematiky děkuji Zubanovi.)

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.

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ď

• z přirozených rozměrů elementu (týká se pouze písma),
• z rozměrů rodičovského elementu (třeba buňka tabulky), nebo
• ze šířky stránky a výšky okna,

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

Proužky by se měly zobrazit podobně široké.

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.

Následující zápisy jsou rovnocenné: 

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

Mají se psát uvozovky, apostrofy nebo nic? 

• Bez vymezovačů by mohly vznikat chyby (zvláště u delších názvů s nejistými znaky). 
• Uvozovky jsou správné, ale selhávají v in-line zápisu: 
<p style="background-image: url("... 
  a to už je chyba.
• Nejjistější jsou tedy apostrofy. Na české klávesnici se dělají např. kombinací Alt + 39.

URL v adrese může být i absolutní.

Další: Různý zápis CSS v prohlížečích Předchozí: Vlastní styly (class a id)
Vizte též: Přehled hodnot CSS, Úvod do CSS, Zápis barev v HTML

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript