Kaskádové styly a jejich směr

27. ledna 2000

•

V minulém, úvodním díle o kaskádových stylech jsme si ukázali první krůčky, a vysvětlili to nejstručnější, abychom mohli s kaskádovými styly experimentovat. V tomto díle se pokusíme ukázat jejich další možnosti, které nám slouží k přesnějšímu cílení účinku kaskádových stylů.

V minulém dílu jsme si ukázali, jak pomocí stylu ovlivnit barvu textu uvnitř jedné značky. Dnes si pro změnu si ukážeme, jak ovlivnit barvu pozadí. Tento styl nastaví světle modrozelenou barvu pozadí do nadpisů první úrovně (což jsou texty uvnitř značek H1):

H1 { background-color: aqua }

Při použití dostaneme tento výsledek:

Toto je nadpis

Zatím uvádíme jenom velmi jednoduché příklady možností stylů. Přesto jsou již i tak velmi dobře použitelné v praxi. Kaskádové styly však umí mnohem více. Začněme tím, že budeme chtít nastavit u nadpisů první úrovně současně barvu pozadí i barvu textu. Na to nám poslouží tento zápis:

H1 { background-color: aqua; color: white }

Výsledek je tento:

Toto je nadpis

Jak vidíte, můžete v jednom zápisu najednou nastavit více věcí najednou. Stačí pouze oddělit jednotlivá nastavení středníkem. Nevadí, ani když poslední nastavení ukončíte středníkem, tedy takto:

H1 { background-color: aqua; color: white; }

Já sám to tak ve svých dokumentech dělám, protože velice často přidávám a ubírám různá nastavení ve stylech. A tak jsem si automaticky zvykl, že připíšu nastavení a zakončím ho středníkem. Tak se mi nemůže stát, že bych na středník někdy zapomněl.

Stejně tak, jako v jednom zápisu můžete nastavit více věcí najednou, můžete říci, že bude stejný zápis aplikován i na více značek najednou. Třeba následující zápis zajistí, že text nadpisů první, druhé i třetí úrovně budou modré. Tedy všechny texty uzavřené uvnitř značek H1, H2, H3:

H1, H2, H3 { color: blue; }

Chcete-li si toto vyzkoušet, vytvořte si třeba soubor, který bude obsahovat následující HTML kód:

<html>
<head>
<style type=“text/css“><!–
H1, H2, H3 { color: blue }
–></style>
</head>
<body>
<h1>Nadpis první úrovně</h1>
<h2>Nadpis druhé úrovně</h2>
<h3>Nadpis třetí úrovně</h3>
<h4>Nadpis čvrté úrovně</h4>
</body>
</html>

A takto se náš příklad zobrazí:

Nadpis první úrovně

Nadpis druhé úrovně

Nadpis třetí úrovně

Nadpis čtvrté úrovně

Zkusíme teď trochu prozkoumat jemněji chování stylů v různých situacích. Jako příklad si vezmeme následující:

B { color: blue; }

Tento zápis nám říká, že všechny texty uzavřené uvnitř značky b (značka b v HTML označuje tučný text) budou mít modrou barvu textu. Zkusíme prozkoumat co se stane, použijeme-li tento styl na následující text (značka em v jazyce HTML označuje text psaný skloněným písmem – kurzívou):

<b>Toto je <em>důležité</em></b>

Výše uvedený text bude zobrazen takto: Toto je důležité

Jak je vidět, modrá barva platí na veškerý text, který je uvnitř značky b, a to dokonce i tehdy, když ho obsahuje text uzavřený do jiné značky. Norma pro CSS tomuto chování říká dědičnost, protože značka em jakoby „zdědila“ modrou barvu od značky b. Ostatně, toto byste asi intuitivně od stylů očekávali.

Na závěr tohoto dílu si ještě ukážeme trochu složitější příklad:

B EM { color: blue; }

Asi snadno poznáte, že chceme nastavit text na modrou barvu. Ale co znamená dvojice „B EM“? Této kombinaci se v normě CSS říká kontextový selektor. V našem případě říká toto: Všechny texty, které jsou uzavřeny uvnitř značek em, a současně navíc uvnitř značek b, budou modré. Více, než tato složitá formulace vám to ozřejmí příklad. Budeme výše uvedené pravidlo aplikovat na tento text:

Tento text se po aplikování našeho stylu zobrazí takto: text 1 a toto je text 2

V dalším díle si budeme povídat o tom, jak pomocí kaskádových stylů nastavovat různé druhy tvarů písma – fontů.