 Specializovan² t²denφk o v²poΦetnφ technice o Internetu (CW 43/97) Vytvß°φme si domovskou strßnku
Ji°φ Kosek ml.
Dokument Minule jsme se zab²vali prost°edky, jak vylepÜit naÜe WWW strßnky. Nynφ si jeÜt∞ shrneme to, na co bychom u ₧ßdnΘho dokumentu nem∞li rozhodn∞ zapomenout. V prvnφ °ad∞ bychom m∞li ka₧d² dokument podepsat, aby bylo z°ejmΘ, kdo je autorem prezentovan²ch informacφ. ┌pln∞ postaΦφ, kdy₧ na konec dokumentu p°ipojφme naÜe inicißly, kterΘ budou odkazem na naÜi domovskou strßnku, kde p°φpadn² zßjemce nalezne naÜi adresu a e-mail. U ka₧dΘho dokumentu by rovn∞₧ m∞la b²t informace o tom, zda je ·pln², kdy byl naposledy modifikovßn a dokdy platφ. N∞kterΘ z t∞chto informacφ lze do strßnky nechat vlo₧it serverem automaticky pomocφ SSI (Server Side Includes). Ka₧d² dokument by m∞l obsahovat odkaz na jemu nad°azen² dokument, aby i nßhodn² nßvÜt∞vnφk dokßzal strßnku za°adit do sprßvnΘho kontextu. Znakem kvalitnφ strßnky je i dob°e zvolen² nßzev. Pokud chceme naÜi strßnku lΘpe p°ipravit pro vyhledßvacφ stroje, m∞li bychom ji doplnit i o struΦn² popis a o klφΦovß slova. Vyu₧φvß se k tomu element META, kter² se smφ pou₧φt v zßhlavφ strßnky pro p°ipojenφ libovolnΘ metainformace. Pomocφ atributu NAME urΦφme jmΘno metainformace a atributem CONTENT pak samotn² obsah metainformace:
<HEAD> KaskßdovΘ styly I. 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. Tato Φßst bude tedy 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 jsem jej pro vßs p°ipravil 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> 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><!-- 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; 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°. 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; 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 */ 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-letter a 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 }
| <<< | COMPUTERWORLD | IDG CZ homepage | |