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.
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í 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.
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.
 |
Šíř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>
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.
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