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://manes.vse.cz/cgi-bin/saczech/toASCII/~xkosj06/www/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 }