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, Hidden, Shodná barva, Velikost, Fantasy, CSS, Browser, Nn, Použitý font, Nejmenší procento, Poloviční velikost, TeX


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

Portál občana už funguje. Na státní web vypadá až překvapivě použitelně

Portál občana už funguje. Na státní web vypadá až překvapivě použitelně

** Portál občana už funguje, vyřídíte na něm první požadavky ** Funkce se budou postupně rozšiřovat ** Web je docela moderní a přehledný

David Polesný | 65

Apple: naše mapy budou nejlepší na světě. Tajně jsme na nich pracovali několik let

Apple: naše mapy budou nejlepší na světě. Tajně jsme na nich pracovali několik let

** Apple odhalil své plány na zcela nové mapy ** Několik let pracuje na nových mapách, které by měly předběhnout konkurenci ** Objeví se s příchodem iOS 12 pro vybrané státy

Karel Javůrek | 50

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

** Systém Windows 10 umí spoustu užitečných drobností ** O mnoha praktických funkcích pravděpodobně ani nevíte ** Poznejte užitečné tipy, které se vám mohou hodit každý den

Vladislav Kluska | 36

Nechcete platit za Total Commander? Těmito bezplatnými programy ho můžete nahradit

Nechcete platit za Total Commander? Těmito bezplatnými programy ho můžete nahradit

** Total Commander je na Windows takřka legendou ** Licence však stojí více než tisíc korun ** Našli jsme pro vás deset alternativ dostupných zdarma

Karel Kilián | 141


Aktuální číslo časopisu Computer

Velký test 18 bezdrátových sluchátek

Vše o přechodu na DVB-T2

Procesory AMD opět porážejí Intel

7 NVMe M.2 SSD v přímém souboji