CSS – Hrátky s textem

V minulých dílech jsme se na příkladech naučili jak používat kaskádové definice stylů. Nyní si podrobněji popíšeme možnosti CSS při práci s textem.
V minulých dílech jsme se na příkladech naučili jak používat kaskádové definice stylů. Nyní si podrobněji popíšeme možnosti CSS při práci s textem. Ukážeme si také, jak vytvořit webovou stránku, která používá vymožeností CSS ale zároveň je možné prohlížet ji starším browserem.

Jedna z vlastností textu je použitý font. U něj můžeme nastavit následující vlastnosti: rodinu písma - vlastnost font-family. Pomocí této vlastnosti nastavujeme jméno fontu. Jmen může být definováno více (jsou odděleny čárkou). Browser pak použije první typ písma, který je nainstalován v systému. Mimo konkrétních jmen písma můžeme použít i obecnou rodinu písma. S její pomocí určíme základní charakteristiku písma a prohlížeč tak může uspokojivě zobrazit stránku i když nemá zrovna k dispozici námi určený konkrétní font. Abychom si mohli být jisti, že bude stránka zobrazena „tak jak má“, měli bychom seznam písem vždy uzavřít obecnou rodinou písma. Možné obecné rodiny písma jsou následující (v závorkách jsou uvedeny konkrétní příklady písma, které může být použito):

Název Vlastnosti
serif Patkové písmo (Times)
sans-serif Bezpatkové písmo (Arial)
coursive ozdobná kurzíva (Zapf-Chancery)
fantasy Ozdobné písmo (Western)
monospace Neproporcionální písmo (Courier)
Konkrétní příklad definice může být takovýto:
H1, H2, H3 { font-family : Arial, sans-serif }
Dalším atributem je velikost písma. Ta se nastavuje pomocí vlastnosti font-size. Její hodnota může být udána různě. Způsoby, které lze použít pro definici velikosti písma ukazuje následující seznam:
  • Podle názvu velikosti (do nejmenší až po největší): xx-small, x-small, small, medium, large, x-large, xx-large.
  • Relativní názvy velikosti (závisí na tom, jakou má velikost okolní text): smaller, larger.
  • Udání velikosti pomocí procent (podobně jako relativní závisí na velikosti okolního písma): pokud budeme chtít použít například poloviční písmo, napíšeme { font-size: 50% }.
  • Udání velikosti pomocí délkových jednotek: můžeme použít jednotky velikosti běžně používané v CSS. Zde je jejich seznam:

Značka jednotky Vysvětlení
px Pixel, tj. jeden bod obrazovky
in Palec = 2,54cm = 72pt
cm centimetr
mm milimetr
pt Bod = 1/72in = 1/12pc
pc pica = 12pt
em šířka písmene M
ex výška písmene x
(poslední dvě jednotky jsou vztaženy k velikosti písma nadřazeného elementu)

Sílu písma udává vlastnost font-weight. Možné hodnoty jsou (od nejtenčího po nejsilnější): lighter, normal, bold, bolder.

Styl písma určuje vlastnost font-style. Můžeme použít hodnoty normal (normální písmo), italic (kurzíva) nebo oblique (skloněné písmo).

Další vlastnost písma určíme pomocí font-variant. Ta určuje, jestli má být písmo normal, nebo small-caps (tj. kapitálky).

Vlastnost font v sobě sdružuje všechny výše uvedené vlastnosti, což nám usnadní tvorbu kaskádových definic. Stačí pak napsat například:

H1 { font : bold normal 16pt/18pt "Arial", sans-serif }

Tato definice způsobí to samé:

H1 { font-weight: bold; font-style: normal; font-size: 16pt; line-height: 18pt; font-family: "Arial", sans-serif }

Vlastnost line-height udává výšku řádky. Při použití vlastnosti font není nutné definovat všechny hodnoty, nicméně je třeba uvést alespoň velikost fontu a rodinu fontu.

Zde je stručný přehled toho, co lze dále nastavit:

  • word-spacing – vlastnost je udaná v délkových jednotkách (viz. tabulka). Nastavíme s její pomocí vzdálenost mezi slovy. POZOR! Tato vlastnost není podporována v IE 4.0 (Internet Explorer)
  • letter-spacing – nastaví vzdálenost mezi písmeny. Tato vlastnost je již podporována jak v IE tak v NN (Netscape Navigator/Communicator).
  • text-align – určí zarovnání textu. Text můžeme zarovnat doleva (left), doprava (right), vycentrovat (center) nebo zarovnat ke krajům (justify).
  • text-indent – posunutí textu od levého okraje. Hodnotu můžeme udat jak v délkových mírách tak i v procentech.
  • vertical-align – s pomocí této hodnoty nastavíme vertikální zarovnání textu vzhledem k okolnímu textu. Možné hodnoty jsou baseline, sub, super, top, text-top, middle, bottom, text-bottom, popřípadě určení pomocí procent.
  • text-transform – umožňuje provádět určité transformace textu – změnit všechna začáteční písmena slov na velká (capitalize), změnit všechna písmena textu na velká (uppercase), změnit všechna písmena textu na malá (lowercase). Hodnota none způsobí zrušení této vlastnosti v případě, že je zděděná od rodičovského elementu.
  • text-decoration – umožňuje nastavit text podtržený (underline), čáru nad textem (overline), přeškrknutý text (line-through) nebo text blikající (blink). Text bez dekorací získáme přiřazením hodnoty none.
Jak vidno lze pomocí kaskádových definic stylů vytvořit krásně vypadající dokument, který bude formátován přesně podle tvůrcovy představy. Bohužel nic není absolutně perfektní a tak musíme vzít v úvahu to, že existují i starší verze prohlížečů Internetu, které nedisponují podporou CSS. Dokud nebudou všichni uživatelé služby WWW používat CSS kompatibilní browser, není dobré tvořit web, který je na CSS úplně závislý – příklad takovýchto stránek je třeba i galerie CSS na webu firmy Microsoft. Zkuste se na tyto příklady podívat starším prohlížečem nebo s vypnutou podporou kaskádových definic. Pokud chceme vytvořit stránku, kde zůstane alespoň přibližně zachován formát obsahu při prohlížení pomocí starších verzí browserů, můžeme použít následující triky.

Skrytí textu před staršími prohlížeči: Pokud vytvoříte pomocí přesného určení polohy objektů (bude probíráno v příštím díle) například logo firmy, nebude se toto logo zobrazovat bez podpory CSS srozumitelně. Je proto lepší skrýt jej před prohlížečem za použití následujícího principu:

<BODY bgcolor="white"><H1>Test podpory CSS</H1><BR><FONT color="white"><SPAN style="color: black; font: bold 20pt "Arial", sans-serif">V pořádku...</SPAN></FONT>V případě, že náš prohlížeč podporuje CSS, zobrazí se černě psaná hláška „V pořádku…“. Je to způsobeno tím, že je brán v potaz tag SPAN, ve kterém je pomocí stylu určena barva textu jako černá. Pokud je použit starší browser je tag SPAN ignorován a je použito nastavení barvy textu pomocí tagu FONT. Ten nastaví barvu textu bílou, což je barva shodná s barvou pozadí. Tím pádem se hláška nezobrazí.

Zobrazení zprávy ve starším prohlížeči: lze také například zobrazit zprávu, že stránky by měly vypadat lépe pokud uživatel použije browser s podporou CSS. Toho lze docílit například tímto způsobem:

<style>P.skryta { visibility : hidden}</style><P class="skryta">Váš browser nedisponuje podporou pro CSS</P>Pokud prohlížeč podporuje kaskádové definice, použije parametr hidden (skrytý) vlastnosti visibility (viditelnost) a text nezobrazí. Starší browsery tuto definici stylu ignorují a zprávu zobrazí.

Dnes jsme tedy vyčerpali vlastnosti pomocí kterých se dá pohrávat si s textem. V příštím díle seriálu si povíme o možnostech určování barvy a pozice objektů.

Váš názor Další článek: 1998: Na tento rok dlouho nezapomeneme (VII.)

Témata článku: Software, Microsoft, Programování, Internet Explorer, Browser, Nejmenší procento, Velikost, Shodná barva, Použitý font, Nn, Poloviční velikost, CSS, Hidden, Fantasy, TeX

Určitě si přečtěte


Aktuální číslo časopisu Computer

Zachraňte nefunkční Windows

Jak nakupovat a prodávat kryptoměny

Otestovali jsme konvertibilní notebooky

Velký test 14 herních myší