KaskßdovΘ styly

HTML je znaΦkovacφ jazyk, ve kterΘm by se m∞l pomocφ znaΦek tag∙ vyznaΦovat v²znam jednotliv²ch Φßstφ textu. Vφme vÜak, ₧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.

Prßce se styly byla pom∞rn∞ podrobn∞ rozebrßna v serißlu Vytvß°φme si domovskou strßnku, tak₧e si zde jen zopakujeme nejd∙le₧it∞jÜφ poznatky. Podrobn∞ji se budeme zab²vat pouze vlastnostmi umo₧≥ujφcφmi °φzenφ pozice element∙ na strßnce -- tyto vlastnosti byly do HTML p°idßny prßv∞ kv∙li dynamickΘmu HTML. Krom∞ toho se podφvßme na pou₧φvßnφ filtr∙ v IE 4.0, proto₧e s filtry se pracuje podobn∞ jako s ostatnφmi vlastnostmi styl∙.

Doufßm, ₧e cennou pom∙ckou pro vßs bude p°ehled vÜech vlastnostφ styl∙, kter² je souΦßstφ dneÜnφho tΘmatu t²dne.

Malß rekapitulace zßklad∙ prßce se styly

Prßce se styly je velmi jednoduchß. Ukß₧eme si ji na jednoduchΘm stylu, kter² zajistφ, aby vÜechny nadpisy prvnφ a₧ t°etφ ·rovn∞ byly zobrazeny bezpatkov²m pφsmem a mod°e. Nadpisy prvnφ ·rovn∞ budou navφc jeÜt∞ vycentrovßny:

H1, H2, H3  { font-family: Arial, sans-serif;
              color: blue }
H1          { text-align: center }

Tento jednoduch² styl se sklßdß ze dvou pravidel. Ka₧dΘ pravidlo mß dv∞ Φßsti -- selektor (nap°. H1) a deklaraci (text-align: center). VÜechny deklarace se sklßdajφ ze dvou Φßstφ -- z vlastnosti (nap°. text-align) a z jejφ hodnoty (center). Pravidla i deklarace lze navzßjem r∙zn∞ sdru₧ovat.

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. Selektory lze vytvß°et i kontextovΘ. Nap°. pravidlo se selektorem H1 EM se pou₧ije pouze na text elementu EM, kter² je uvnit° nadpisu prvnφ ·rovn∞.

Vlastnostφ, kterΘ je u ka₧dΘho elementu mo₧no pou₧φt, je n∞kolik desφtek. VÜechny jsou uvedeny v p°ipojen²ch tabulkßch.

Aby mohl p°i zobrazovßnφ strßnky pou₧φt prohlφ₧eΦ styl, musφ o n∞m mφt informaci. NejΦast∞ji se pou₧φvajφ nßsledujφcφ t°i zp∙soby p°ipojenφ stylu ke strßnce.

<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"><!--
        H1, H2, H3  { font-family: Arial, sans-serif;
                      color: blue }
        H1          { text-align: center }             
    -->    
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Nadpis je krßsn∞ modr² a vycentrovan²</H1>
    <P STYLE="color: green">Ekologick² paragraf je zelen².
  </BODY>
</HTML>

Prvnφ zp∙sob vyu₧φvajφcφ element LINK p°ipojφ k dokumentu styl ulo₧en² v separßtnφm souboru.

Styl m∙₧e b²t definovßn i p°φmo v dokumentu mezi tagy <STYLE> a </STYLE>. Pomocφ komentß°e jsme definici stylu skryli p°ed starÜφmi prohlφ₧eΦi, kterΘ CSS nepodporujφ.

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φ. V dynamickΘm HTML nßm vÜak mnohdy prokß₧e neocenitelnΘ slu₧by.

RozÜφ°enφ styl∙ o °φzenφ pozice element∙

Nynφ se podrobn∞ji podφvßme na vlastnosti, kterΘ umo₧≥ujφ °φdit umφst∞nφ jednotliv²ch element∙ na strßnce. Toto rozÜφ°enφ je dnes pracovnφm nßvrhem konsorcia W3C a podle mne se brzy stane doporuΦenφm W3C (a pro nßs tedy i standardem). Toto rozÜφ°enφ je dnes i integrßlnφ souΦßstφ nßvrhu novΘ verze kaskßdov²ch styl∙ CSS2.

RozÜφ°enφ p°inßÜφ novΘ vlastnosti, kterΘ umo₧≥ujφ p°esn∞ °φdit vzßjemnΘ umφst∞nφ jednotliv²ch element∙ na strßnce. Mezi nejd∙le₧it∞jÜφ novΘ vlastnosti pat°φ left a top, kterΘ urΦujφ posunutφ elementu. Jejich konkrΘtnφ interpretace vÜak zßvisφ na hodnot∞ vlastnosti position. Ta m∙₧e nab²vat dvou hodnot -- absolute a relative, kterΘ rozliÜujφ mezi absolutnφm a relativnφm urΦenφm pozice.

Absolutnφ urΦenφ pozice

Pokud pou₧ijeme absolutnφ urΦenφ pozice elementu, je tento element zobrazen zcela nezßvisle na svΘm p∙vodnφm umφst∞nφ. Jeho lev² hornφ roh se posune do mφsta zadanΘho pomocφ left a top. Sou°adnice se vztahujφ k sou°adnΘmu systΘmu nad°azenΘho elementu a tφm je nejΦast∞ji cel² dokument. Jeho lev² hornφ roh mß sou°adnice (0,0).

Jako hodnotu vlastnostφ left a top m∙₧eme pou₧φt bu∩ pixely (px) nebo procento, kterΘ se vztahuje k Üφ°ce resp. v²Üce rodiΦovskΘho elementu:

<BODY>
<H1>ZkouÜka absolutnφho umφst∞nφ</H1>
<SPAN STYLE="position: absolute; left: 50%; top: 50%">
<B>Computerworld</B> zaΦφnß p°esn∞ uprost°ed obrazovky</SPAN>
</BODY>

V²sledek naÜeho prvnφho pokusu o zm∞nu umφst∞nφ elementu na strßnce si m∙₧eme prohlΘdnout na obrßzku.

Strßnka s absolutn∞ umφst∞n²m textem

èφ°ku, do kterΘ se bude formßtovat obsah elementu, m∙₧eme urΦit pomocφ vlastnosti width. V²Üka se pak upravφ podle pot°eby. I tu vÜak m∙₧eme nastavit pomocφ vlastnosti height.

Absolutn∞ umφst∞nΘ elementy se mohou p°ekr²vat. O tom, kter² element bude vid∞t, rozhoduje vlastnost z-index. Element, kter² ji mß nastavenu na v∞tÜφ hodnotu, p°ekryje ty ostatnφ. Vyu₧itφ popsanΘ vlastnosti demonstrujeme na nßsledujφcφ malΘ ukßzce:

<HTML>
<HEAD>
<TITLE>Absolutnφ umφst∞nφ a z-index</TITLE>
<STYLE TYPE="text/css"><!--
  .nadpis { font-size: 80px;
            font-style: bold }
--></STYLE>
</HEAD>
<BODY>
<DIV CLASS=nadpis>
<SPAN STYLE="position: absolute; left: 1; top: 1;
 color: #001; z-index: 1">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 2; top: 2;
 color: #003; z-index: 2">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 3; top: 3;
 color: #005; z-index: 3">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 4; top: 4;
 color: #007; z-index: 4">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 5; top: 5;
 color: #009; z-index: 5">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 6; top: 6;
 color: #00b; z-index: 6">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 7; top: 7;
 color: #00d; z-index: 7">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 8; top: 8;
 color: #00f; z-index: 8">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 9; top: 9;
 color: #22f; z-index: 9">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 10; top: 10;
 color: #44f; z-index: 10">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 11; top: 11;
 color: #66f; z-index: 11">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 12; top: 12;
 color: #88f; z-index: 12">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 13; top: 13;
 color: #aaf; z-index: 13">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 14; top: 14;
 color: #ccf; z-index: 14">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 15; top: 15;
 color: #eef; z-index: 15">Computerworld</SPAN>
</DIV>
</BODY>
</HTML>

Relativnφ urΦenφ pozice

Pokud pou₧ijeme relativnφ urΦenφ pozice, element se pouze posune ze svΘ p°irozenΘ pozice o dΘlku urΦenou pomocφ left a top. Jeho formßtovßnφ p°itom z∙stane zachovßno. Text v nad°azenΘm elementu z∙stane zformßtovßn tak, jako by posunut² element nebyl v∙bec posunut. Malß ukßzka:

N∞jak² text
<SPAN STYLE="position: relative; left: 10px; top: 10px">
Relativnφ text</SPAN>
a zase p∙vodnφ text.

Element se stylem position: relative op∞t definuje nov² sou°adn² systΘm s poΦßtkem ve svΘm levΘm hornφm rohu. To lze vyu₧φt nap°φklad pro vytvo°enφ stφnu:

<DIV STYLE="font: bold 30px Arial">Ukßzka
<SPAN STYLE="position: relative">stφnovanΘho textu
<SPAN STYLE="position: absolute; left: 2px; top: 2px;
             color: green">stφnovanΘho textu
</SPAN></SPAN>uvnit° jinΘho textu.</DIV>

Pro vytvß°enφ r∙zn²ch efekt∙ je d∙le₧itou vlastnostφ visibility. M∙₧e nab²vat dvou hodnot -- visible a hidden. Prvnφ z nich °φkß, ₧e element bude vid∞t. Druhß, ₧e vid∞t nebude.

Vlastnost visibility musφme odliÜit od vlastnosti display. Deklarace display: none zp∙sobφ, ₧e se element bude zcela ignorovat, jakoby na strßnce v∙bec nebyl. Oproti tomu visibility: hidden vynechß pro element mφsto, element pouze nenφ viditeln∞ zobrazen. To lze vyu₧φt pro r∙znΘ efekty, pokud mßme n∞kolik element∙ p°ekryt²ch p°es sebe a podle pot°eby je zviditel≥ujeme a znevidit∞l≥ujeme.

Filtry v IE 4.0

Filtry jsou novinkou v Exploreru 4.0. Filtry umo₧≥ujφ modifikovat vzhled elementu -- lze nap°. p°idat stφn, nastavit elementu pr∙hlednost apod. Krom∞ t∞chto filtr∙ jsou podporovßny i p°echodovΘ filtry, kterΘ umo₧≥ujφ pomocφ r∙zn²ch grafick²ch efekt∙ p°ejφt od jednoho zobrazenΘho elementu k jinΘmu. S filtry se do jistΘ mφry pracuje stejn∞ jako se styly a proto jsme je za°adili na toto mφsto.

Samotnß deklarace filtru ve stylu je jednoduchß. Obecn∞ ji m∙₧eme zapsat jako

filter: jmΘno_filtru(parametry)

Jedna deklarace p°itom m∙₧e obsahovat n∞kolik filtr∙ najednou -- jednotlivΘ filtry se odd∞lφ mezerou. Nßsledujφcφ HTML k≤d vlo₧φ do strßnky obrßzek a pomocφ filtr∙ u n∞j vytvo°φ stφn a vertikßln∞ ho otoΦφ:

<IMG SRC="fotka.jpg"
     STYLE="filter: DropShadow(Color=#808080,OffX=4,OffY=4) FlipV()">

Filtry nelze pou₧φvat u vÜech element∙, ale jen u n∞kter²ch. Obecn∞ se dß °φci, ₧e jde o elementy, kterΘ po zobrazenφ v₧dy zaujφmajφ obdΘlnφkovou plochu konstantnφ velikosti. Jednß se o elementy

BODY, BUTTON, IMG, INPUT, TABLE, TD, TEXTAREA, TFOOT, TH, THEAD,
TR

. Filtry lze aplikovat i na elementy DIV a SPAN, pokud majφ definovßnu v²Üku a Üφ°ku anebo jsou na strßnce umφst∞ny absolutn∞.

Podrobn² p°ehled filtr∙ a vÜech jejich parametr∙ je uveden v tabulce. Praktickou prßci s filtry a to vΦetn∞ filtr∙ p°echodov²ch si p°edvedeme v Φßsti v∞novanΘ ukßzkßm dynamickΘho HTML.

┌vod | JavaScript | Ukßzky | P°ehled vlastnostφ styl∙ | DHTML vs. Java

© Copyright 1998 Ji°φ Kosek, All Rights Reserved.
Strßnka obsahuje pln² text Φlßnku otiÜt∞nΘho v t²denφku Computerworld dne 30. ledna 1998 (CW5/98).
Strßnku p°ipravil Ji°φ Kosek, xkosj06@vse.cz
Poslednφ modifikace: 24-01-98