Kaskádové styly I.

Jiří Kosek ml.

HTML je značkovací jazyk, ve kterém by se pomocí značek měl vyznačovat význam jednotlivých částí textu. Z vlastní zkušenosti však víme, že dnes v HTML existuje několik atributů a elementů, které ovlivňují pouze grafický vzhled. Použitím těchto atributů a elementů sice můžeme získat graficky atraktivní stránku, má to však řadu nevýhod.

Text stránky je mnohdy špatně strukturován, protože jednotlivé elementy jsou využívány účelově k dosažení určitých grafických efektů. Druhou velkou nevýhodou je velká pracnost -- většina z vizuálních atributů musí být nastavována opakovaně u všech elementů.

Obě tyto nevýhody odstraňují kaskádové styly -- Cascading Style Sheets (CSS). Styly umožňují definovat způsob zobrazení (druh a velikost písma, barvu, zarovnání apod.) každého elementu na stránce. Styl však není přímo součástí textu stránky a tak může být zápis stránky přehlednější a dobře strukturovaný. Navíc styly umožňují definovat jednotný vzhled určitého elementu v celém dokumentu jedním zápisem -- nemusíme jej opakovat u každého elementu.

V tomto díle seriálu si popíšeme základní principy, na kterých jsou styly založeny. V dalších seriálech se podíváme na konkrétní vlastnosti stylů, které ovlivňují výsledné zobrazení stránky. Dnešní díl bude poměrně sucharský, ty další však budou doplněny o mnoho praktických ukázek.

Základy práce se styly

Práce se styly je velmi jednoduchá. Ukážeme si jednoduchý styl, který zajistí, že všechny nadpisy H1 budou zobrazeny modře:

H1 { color: blue }

Tento jednoduchý styl se skládá z jednoho pravidla. Každé pravidlo má dvě části -- selektor (H1) a deklaraci (color: blue). Deklarace se skládá ze dvou částí -- z vlastnosti (color) a z její hodnoty (blue).

Selektor nám zajišťuje vazbu na odpovídající HTML element. Jako selektor mohou být samozřejmě použity všechny elementy HTML. Vlastností, které je u každého elementu možno použít, je několik desítek. Na ty nejdůležitější z nich se podíváme v dalších pokračováních našeho seriálu. Kompletní přehled všech vlastností by zabral na stránkách CW mnoho místa. Z tohoto důvodu jsme jej pro vás připravili pouze v elektronické podobě na adrese http://www.kosek.cz/clanky/web/css-ref.html.

Připojení stylu k HTML dokumentu

Aby mohl při zobrazování stránky použít prohlížeč styl, musí o něm mít informaci. V HTML jsou čtyři možnosti, jak styl k HTML dokumentu připojit. Následující ukázka obsahuje všechny čtyři najednou:

<HTML>
  <HEAD>
    <TITLE>Titulek stránky</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css"
          HREF="http://style.com/super" TITLE="Super styl">
    <STYLE TYPE="text/css">
      @import url(http://style.com/zakladni);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Nadpis je krásně modrý</H1>
    <P STYLE="color: green">Ekologický paragraf je zelený.
  </BODY>
</HTML>

První dva způsoby pracují se stylem uloženým v separátním souboru. Tento soubor se stylem lze k dokumentu připojit buď použitím elementu LINK s odpovídajícími atributy nebo pomocí příkazu @import v samotné definici stylu.

Styl může být definován i přímo v dokumentu mezi tagy <STYLE> a </STYLE>. Za pozornost stojí atribut TYPE. Pomocí něj určujeme druh použitého stylového jazyka. V budoucnu možná vzniknou i jiné stylové jazyky a proto bychom měli tento atribut používat k určení použitého druhu stylů. Pro styly CSS se používá MIME typ text/css.

Poslední možností je definice stylu pouze pro jeden konkrétní element. Toho lze dosáhnout použitím atributu STYLE, který můžeme použít u všech elementů. Tento způsob však poněkud odporuje samotné filosofii stylů -- míchá totiž obsah dokumentu s jeho grafickou prezentací.

Aby byla zachována kompatibilita s prohlížeči, které nepodporují styly, je výhodné samotnou definici stylu uzavřít do komentáře. Starší prohlížeče ji pak ignorují:

<STYLE><!--
  H1 { color: blue }
--></STYLE>

Slučování definic

Abychom ušetřili místo, můžeme použít pro několik selektorů stejnou deklaraci. Selektory v tomto případě oddělujeme čárkou:

H1, H2, H3 { color: blue }

Sloučit můžeme i několik deklarací -- ty se však oddělují středníkem:

H1 { font-weight: bold;
     font-size: 12pt;
     line-height: 14pt;
     font-family: sans-serif;
     font-variant: normal;
     font-style: normal }

Některé vlastnosti lze nastavit společně pomocí jediné. Předchozí příklad můžeme zkráceně zapsat jako

H1 { font: bold 12pt/14pt sans-serif }

Dědění vlastností

V naší první ukázce stylu jsme barvu elementu H1 nastavili na modrou. Co se stane, když uvnitř elementu H1 použijeme například element pro zvýraznění?

<H1>Tato kapitola <EM>je</EM> důležitější než ostatní</H1>

Pokud jsme stylem neurčili barvu elementu EM, slovo "je" bude zobrazeno modře. Tuto barvu zdědí z nadřazeného elementu (H1), který je modrý. Většina vlastností se dědí podobně jako barva.

Pokud chceme nastavit nějakou vlastnost jako základní pro celý dokument, můžeme použít deklaraci se selektorem BODY.

BODY { color: black;
       background-color: white }

Takto definované vlastnosti zdědí ty elementy, které neobsahují ve stylu vlastní deklaraci použitých vlastností. Dokument tedy bude zobrazen černě na bílém podkladu.

Třída jako selektor

Zatím jsme si ukázali, jak nastavit vzhled určitého elementu pro celý dokument společně. Někdy však potřebujeme stejný element zobrazit v různých výskytech rozdílně. Proto můžeme u každého elementu, který patří do těla dokumentu (BODY), určit jeho třídu pomocí atributu CLASS. Na jméno třídy definované tímto atributem se samozřejmě můžeme odkazovat i v definici stylu. Dejme tomu, že naše stránka obsahuje poznámky, které jsou zapisovány následujícím způsobem:

<DIV CLASS=footnote>
Tady je text poznámky
</DIV>

V definici stylu lze selektor doplnit o název třídy. Název třídy se od jména elementu odděluje tečkou:

DIV.footnote { font-size: smaller;
               margin-left: 2em;
               margin-right: 2em }

Jako selektor můžeme použít i samotný název třídy. Pak deklarace platí pro všechny elementy, kterým je atributem CLASS přiřazena daná třída.

.footnote { font-size: smaller;
            margin-left: 2em;
            margin-right: 2em }

Použití tagu <DIV> způsobí zalomení textu a text elementu pokračuje až na další řádce. Pokud chceme třídu přiřadit nějakému textu, který je součástí odstavce, použijeme k jeho značení element SPAN společně s atributem CLASS. SPAN je nový element, který byl do HTML přidán právě kvůli stylům.

Identifikátor elementu jako selektor

Pro použití se styly bylo HTML rozšířeno ještě o jeden atribut. U každého elementu můžeme použít atribut ID. Ten slouží k definici jedinečného jména elementu v rámci dokumentu. Na takto pojmenované elementy jednak můžeme vytvářet odkazy (v URL použijeme fragment) a jednak pro ně lze ve stylu uvést zvláštní deklaraci.

#L027 { letter-spacing: 1pt }
H1#L027 { letter-spacing: 2pt }

První deklarace vyhoví všem elementům, jejichž atribut ID je nastaven na hodnotu L027. Např.:

<P ID=L027>Odstavec prostrkaného textu

Druhá deklarace stylu se použije pouze v případech, kdy je ID=L027 použito u elementu pro nadpis první úrovně.

POZOR: Vidíme, že pomocí této konstrukce můžeme nastavit styl pro každý element zvlášť. Tomu bychom se však měli vyhnout -- styl by měl být jednotný pro všechny elementy. Pokud potřebujeme u nějakého elementu rozlišit několik jeho různých významů, můžeme použít rozlišení pomocí tříd (atribut CLASS).

Kontextové selektory

To, že se vlastnosti ve stylech dědí, nám při vytváření stylů ušetří mnoho práce. Místo pracného nastavování všech vlastností, stačí nastavit jejich základní hodnoty a poté pouze vyjmenovat výjimky. Pro nastavování výjimek je velice výhodné použít kontextové selektory. Kontextový selektor může vypadat třeba takto:

H1
EM

. Vyhovuje všem elementům EM, které jsou uvnitř elementu H1. Uvedenou vlastnost můžeme elegantně použít pro nastavení menšího písma pro položky hlouběji vnořených seznamů:

LI OL, LI UL { font-size: smaller }

Tato deklarace nám neříká nic jiného než, že v číslovaných a nečíslovaných seznamech obsažených uvnitř položky jiného seznamu bude použita menší velikost písma.

V kontextových selektorech můžeme kromě elementů používat i třídy (CLASS), názvy elementů (ID) a jejich kombinace:

.preface BLOCKQUOTE { font-style: italic }
#x81a CODE { color: yellow }

Komentáře

V definici stylu můžeme používat komentáře, které se zapisují mezi dvojici znaků /* a */.

EM { color: red } /* všechna zvýraznění budou červená */

Pseudotřídy a pseudoelementy

Výše popsaný způsob práce se selektory nám dovoluje opravdu mnoho. Existují však některé speciální případy, které je potřeba ošetřit samostatně. Pro tyto účely slouží speciální selektory. Jejich specialita spočívá v tom, že se v HTML stránce nikde neobjeví. V HTML zápisu stránky jim neodpovídá žádný element. Jsou pouze myšleně doplněny prohlížečem na potřebná místa.

Pseudotřídy existují tři. Slouží pro nastavení barvy odkazů, navštívených odkazů a aktivovaných odkazů:

A:link          { color: blue }   /* nenavštívený odkaz */
A:visited       { color: red }    /* navštívený odkaz */
A:active        { color: yellow } /* aktivní odkaz */

Pseudotřídy mohou být použity i v kontextových selektorech.

Pomocí pseudoelementů můžeme dosáhnout velice mocných grafických efektů. Bohužel je zatím většina prohlížečů nepodporuje. Pseudoelementy existují dva first-line a first-lettera slouží k nastavení vlastností první řádky resp. prvního písmene textu v daném elementu. Následující deklarace nám umožní používat odstavce třídy iniciala (<P CLASS=iniciala>), které budou obsahovat iniciálu -- tj. jejich první písmeno bude zvětšené a zasazené do textu.

P.iniciala:first-letter { font-size: 300%; float: left }