Délkové jednotky v CSS
Zápis délky - Pixel - Absolutní jednotky - Relativní jednotky - Procenta - Příklad - Zápis URL
Zápis délky
Použitelné délkové 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 v anglosaském světě), nikoliv čárkou (jak je zvykem u nás v Rakousko-Uhersku).
V CSS se mezi číslem a značkou jednotky nedělá mezera.
Například font-size: 14pt.
Pokud mezi číslem a jednotkou uděláte mezeru nebo náhodou uvedete délku bez jednotky jenom jako číslo, je to chyba. Prohlížeč ve striktním režimu to vyhodnotí jako chybu a zápis bude ignorovat. Internet Explorer v quirk módu interpretuje hodnoty bez jednotek jako pixely. (Mimochodem v češtině je to jinak, v českém textu se správně před jednotkou mezera dělá.)
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.
- Oproti tomu v CSS se pixely vždy musejí zapsat s jednotkou px (bez mezery před).
Příklad:
div {width: 650px; height: 340px;}
Jestli si pixel jako délku neumíte představit, tak vězte, že obrazovka má na šířku něco kolem 1000 pixelů nebo víc. Pixely jsou ta čísla, která se ve Windowsech nastavují ve vlastnostech plochy jako rozlišení obrazovky. Chcete-li pixel vidět, podívejte se na bílou část obrazovky lupou, dá se tam rozeznat taková jako mřížka. Světlé body mezi tmavší mřížkou jsou pixely, jsou od sebe vzdáleny jeden pixel (ve skutečnosti je ta tmavší mřížka tvořena modrou složkou pixelu, ta světlá část pixelu je červená a zelená složka).
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í).
| 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 = 2,54cm | 1in = 96px |
| pt | typografický bod | 72pt = 1in | 3pt = 4px * |
| pc | pica nebo též cicero | 1pc = 12pt , 6pc = 1in | 1pc = 16px |
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.
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 a jako pomocnou relativní jednotku em.
Relativní jednotky
| Značka | Název | Význam |
|---|---|---|
| em | eM, čtverčík | výška jednoho řádku základního písma. |
| ex | eX | výška malého písmena x |
| rem | kořenové eM | výška jednoho řádku úplně základního typu písma |
Jednotky em a ex mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost písma může být ovlivněna jednak nadřazeným nastavením stylu (font-size), formátovacími značkami (<big> a pod.) a také volbou uživatele či nastavením operačního systému. Většina prohlížečů umožňuje nastavit velikost zobrazovaného písma (zobrazit / velikost textu). To je i základní význam těchto jednotek -- umožňují spáchat vzhled, který se při změně tohoto nastavení nerozsype (jiná dobrá metoda proti rozsypání je všechno zadávat v pixelech).
Název em vychází z historického významu. Původně jednotka em znamenala šířku velkého písmena M. Tento význam byl (z důvodů, které neznám) opuštěn a zůstalo pouze pojmenování em.
Možné použití je například u obtékaných obrázků: pokud chcete, aby obrázek byl vysoký stejně jako tři řádky textu, 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 standardní písma a Internet Explorer do verze 7 platilo 1em = 2ex. Uvedený poměr se může lišit nejen v závislosti na prohlížeči, ale hlavně v závislosti na použitém písmu (font-family). Novější prohlížeče už opravdu přeměřují písmo a poměr volí různě.
V moderních designech se velmi často používá jednotka em. Jednotku ex jsem v praxi používat moc neviděl. Existuje i jednotka en (půlčtverčík, šířka písmene n), která je ale nestandardní a divně podporovaná.
Jednotka rem je relativně mladá, začala být plně podporována až v Internet Exploreru 9 a v ostatních prohlížečích od roku 2011, takže ji lze doporučit jen s opatrností. Rem vyjadřuje jednotku em kořenového prvku (tedy typicky prvku <html>), což je šířka písmena M, které je zapsáno do úplně čistého dokumentu a zobrazeno v prohlížeči. Výhodou takové definice je, že tato jednotka není ovlivněna žádnou další deklarací nadřazených prvků. To je hlavní rozdíl od jednotky em, která je ovlivňována svými nadřazenými deklaracemi -- em se tedy mění, rem nemění. Možná, že jsem měl rem zařadit mezi absolutní jednotky, ale její velikost je ovlivněna použitým prohlížečem a operačním systémem.
Procenta
S procenty je v CSS trochu zmatek, ale dá se to pochopit. Zápis vypadá jako u
obyčejných jednotek, např: width: 20%; (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.
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, výšky řádku a vlastnosti zoom),
- z rozměrů rodičovského elementu (třeba buňka tabulky, div),
- 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í. Například zadávání velikosti písma procenty je v podstatě jediná možnost, jak mít písmo stejně velké v různých prohlížečích.
Příklad
Proužky by se měly zobrazit podobně široké.
Aktuální poznámky k příkladu a jednotkám má Chamurappi v diskusi.
Zápis URL
Přesunuto na samostatnou stránku URL v CSS.
Reklama
