 Specializovan² t²denφk o v²poΦetnφ technice o Internetu (CW 45/97) Vytvß°φme si domovskou strßnku
Ji°φ Kosek ml.
KaskßdovΘ styly II.
Pseudot°φdy a pseudoelementy V minulΘm dφle 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 zvlßÜtnost 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φ 3. Slou₧φ pro nastavenφ barvy odkaz∙, navÜtφven²ch odkaz∙ a aktivovan²ch odkaz∙:
A:link { color: blue } /* nenavÜtφven² odkaz */ 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φ 2 -- 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 }
Co vÜe lze nastavit pomocφ styl∙ Nynφ se podφvßme na jednotlivΘ vlastnosti, kterΘ lze pomocφ styl∙ nastavit. JeÜt∞ jednou p°ipomφnßm, ₧e kompletnφ p°ehled vÜech vlastnostφ styl∙ je p°φstupn² na adrese http://manes.vse.cz/cgi-bin/saczech/toASCII/~xkosj06/www/css-ref.html. Pokud postrßdßte n∞kter² ze starÜφch dφl∙ serißlu, m∙₧ete si jej stßhnout z WWW strßnky IDG.
Vlastnosti, kterΘ °φdφ typ pou₧itΘho pφsma Existue skupina vlastnostφ, kterΘ slou₧φ pro urΦenφ pou₧itΘho druhu pφsma. Asi nejv²razn∞jÜφm rysem, odliÜujφcφm jednotlivΘ typy pφsma, je rodina pφsma. K jejφmu nastavenφ slou₧φ vlastnost font-family. Jako hodnota atributu se uvßdφ seznam jem pφsmen odd∞len²ch Φßrkami. Prohlφ₧eΦ k zobrazenφ pou₧ije prvnφ pφsmo v seznamu, kterΘ mß k dispozici. Pokud tedy chceme k zobrazenφ strßnky pou₧φt bezpatkovΘ pφsmo, pou₧ijeme ve stylu nßsledujφcφ deklaraci: BODY { font-family: Arial, Helvetica, sans-serif } Prohlφ₧eΦ se pro zobrazenφ strßnky pokusφ pou₧φt pφsmo Arial. Pokud pφsmo s tφmto nßzvem nebude k dispozici, pou₧ije se pφsmo Helvetica. Pokud ani to nenφ k dispozici, pou₧ije se libovolnΘ bezpatkovΘ pφsmo dostupnΘ v systΘmu. Toto chovßnφ zajiÜ¥uje prßv∞ poslednφ hodnota sans-serif. V jejφm p°φpad∞ se jednß o tzv. obecnou rodinu pφsma. Ta neurΦuje konkrΘtnφ font, ale pouze jeho zßkladnφ vlastnosti. Pokud tedy prohlφ₧eΦ nemß k dispozici pφsmo uvedenΘ v seznamu, pou₧ije to, kterΘ sv²mi parametry odpovφdß obecnΘmu pφsmu. P°ehled 5 obecn²ch rodin pφsem, kterΘ m∙₧eme pou₧φt, uvßdφ tabulka 1.
ObecnΘ rodiny pφsem
TIP: V seznamu po₧adovanΘ rodiny pφsma bychom m∞li v₧dy na konci uvΘst jednu z obecn²ch rodin. Zajistφme tφm p°ijatelnΘ zobrazenφ strßnky na systΘmech, kterΘ nemajφ k dispozici nßmi po₧adovanΘ pφsmo.
Po v²b∞ru rodiny pφsma m∙₧eme m∞nit jeÜt∞ dalÜφ parametry pφsma. Styl pφsma m∙₧eme ovlivnit pomocφ vlastnosti font-style. M∙₧eme pou₧φt normßlnφ pφsmo (normal), kurzφvu (italic) a sklon∞nΘ pφsmo (oblique).
POZN┴MKA: Kurzφva a sklon∞nΘ pφsmo nejsou stejnΘ. Sklon∞nΘ pφsmo vznikß pouhou geometrickou transformacφ normßlnφho pφsma. Kurzφva je naopak jedineΦn² °ez pφsma.
Na v²b∞r mßme rovn∞₧ ze 2 variant pφsma pomocφ vlastnosti font-variant. M∙₧eme pou₧φt bu∩ normßlnφ (normal), nebo kapitßlky (small-caps). Pokud tedy chceme, aby citace byly zobrazovßny kapitßlkami tak, jak to bylo obvyklΘ d°φve v kni₧nφ sazb∞, m∙₧eme pou₧φt nßsledujφcφ deklaraci: CITE { font-variant: small-caps; font-style: normal } Na strßnce, pak m∙₧eme citovat dle libosti -- nap°.: Mezi nejznßm∞jÜφ Tolkienova dφla pat°φ trilogie <CITE>Pßn prsten∙</CITE>. Zobrazenφ v prohlφ₧eΦi dopadne zhruba jako na obrßzku 1:
Vlastnost font-weight ovliv≥uje duktus (sφlu) pφsma. NejΦast∞ji asi pou₧ijeme hodnotu bold, kterß odpovφdß pou₧itφ tuΦnΘho pφsma. Zajφmavou mo₧nost nabφzφ hodnota bolder, kterß prohlφ₧eΦi °φkß, aby pou₧il o n∞co tuΦn∞jÜφ pφsmo, ne₧ je b∞₧nΘ. Obdobn∞ hodnota lighter zvolφ o n∞co sv∞tlejÜφ pφsmo. DalÜφ klasickou vlastnostφ pφsma je velikost. K jejφmu nastavenφ slou₧φ vlastnosti font-size. NejΦast∞ji velikost nastavφme absolutn∞ na n∞jak² rozm∞r -- nap°. 12pt. P°ehled dΘlkov²ch jednotek, kterΘ m∙₧eme pou₧φt ve stylech, p°inßÜφ tabulka 2.
DΘlkovΘ jednotky
V tabulce si m∙₧ete vÜimnout, ₧e prvnφ 3 dΘlkovΘ jednotky zßvisφ na velikosti pφsma. Nem∙₧eme je proto pou₧φt k urΦenφ velikosti pφsma (vlastnost font-size). Velikost pφsma lze zadat i relativn∞ v procentech. Budeme-li tedy chtφt pou₧φt dvakrßt v∞tÜφ pφsmo, ne₧ je b∞₧nΘ, staΦφ pou₧φt konstrukci font-size: 200%. Pro pou₧itφ o chlup v∞tÜφho pφsma, m∙₧eme pou₧φt hodnotu larger. Pro menÜφ pφsmo pak obdobn∞ smaller. K dispozici jsou i nßzvy pro jednotlivΘ velikosti. Uvedeme si je od nejm∞nÜφ a₧ po tu nejv∞tÜφ velikost: xx-small, x-small, small, medium, large, x-large, xx-large. Vidφme, ₧e p°i v²b∞ru pφsma mßme k dispozici mnoho mo₧nostφ a ₧e nastavenφ vÜech pot°ebn²ch parametr∙ m∙₧e b²t pom∞rn∞ zdlouhavΘ. Prßci si lze uÜet°it pou₧itφm vlastnosti font, kterß slou₧φ k nastavenφ vÜech charakteristik pφsma jedinou deklaracφ. Nßsledujφcφ krßtkß ukßzka:
BLOCKQUOTE { font: bold italic 12pt/14pt "Times Roman", serif } P°i pou₧itφ vlastnosti font nemusφme uvßd∞t vÜechny dφlΦφ vlastnosti ovliv≥ujφcφ druh pφsma. V₧dy bychom vÜak m∞li uvΘst alespo≥ velikost a rodinu pφsma.
Barvy Pomocφ stylu lze samoz°ejm∞ urΦit i barvu elementu. K nastavenφ barvy slou₧φ vlastnost color. Jako jejφ hodnotu m∙₧eme uvΘst hned n∞kolik r∙zn²ch typ∙ hodnot. Asi nejb∞₧n∞jÜφ je uvedenφ jmΘna barvy. JmΘna m∙₧eme pou₧φt stejnß jako v HTML a pro ·plnost si je zopakujeme: aqua (jasnß modrozelenß), black (Φernß), blue (modrß), fuchsia (anilinovß Φerve≥), gray (Üedivß), green (zelenß), lime (citronov∞ zelenß), maroon (kaÜtanovß), navy (tmavß mod°), olive (olivovß), purple (purpurovß), red (Φervenß), silver (st°φbrnß), teal (tmavß modrozelenß), white (bφlß), yellow (₧lutß). Pokud tedy chceme, aby byly vÜechny nadpisy prvnφ ·rovn∞ zobrazeny Φerven∞, staΦφ do stylu p°idat nßsledujφcφ deklaraci: H1 { color: red } Pokud nßm nestaΦφ p°eddefinovanΘ barvy, m∙₧eme si namφchat vlastnφ ze zßkladnφch barev (ΦervenΘ, modrΘ a zelenΘ). Pou₧φvß se op∞t stejn² zp∙sob jako v HTML. Za hash-mark (#) uvedeme hexadecimßln∞ zapsanΘ intenzity t°φ slo₧ek. Pro oran₧ovou barvu m∙₧eme pou₧φt zßpis #FFC000. Existujφ i dalÜφ zp∙soby zßpisu barev, ale 2 v²Üe uvedenΘ jsou nepou₧φvan∞jÜφ. Samoz°ejm∞, ₧e lze nastavit i barvu pozadφ pro ka₧d² element. Slou₧φ k tomu vlastnosti background-color. Pokud vlastnost aplikujeme na element BODY, pou₧ije se pro cel² dokument (mß stejn² ·Φinek jako specifikovßnφ barvy pozadφ pomocφ atributu BGCOLOR u tagu <BODY>). Na pozadφ m∙₧eme mφt i obrßzek -- k jeho urΦenφ pou₧ijeme vlastnost background-image. Jako hodnota se uvßdφ URL obrßzku. P°i zßpisu URL vÜak musφme pou₧φt pon∞kud nezvykl² funkcionßlnφ zßpis: url(http://www.server.cz/images/logo.gif) Pou₧φvat lze samoz°ejm∞ i relativnφ URL. Za zßkladnφ se vÜak pova₧uje URL stylu. Pokud tedy nenφ styl p°φmo zapsßn ve strßnce, musφme si uv∞domit, kam p°esn∞ relativnφ URL ukazuje. Pokud nastavφme ob∞ vlastnosti -- background-color i background-image -- pou₧ije prohlφ₧eΦ na pozadφ obrßzek. Pokud vÜak bude obrßzek z n∞jak²ch p°φΦin nedostupn², bude mφt pozadφ barvu urΦenou vlastnostφ background-color. Ob∞ vlastnosti m∙₧eme nastavit i najednou pomocφ vlastnosti backround: BODY { background: black url(/images/hvezdy.gif) } Obrßzek pozadφ lze nastavit pro ka₧d² element zvlßÜ¥. M∙₧eme si tedy vytvo°it nap°. styl, kter² pou₧ije pro tabulku zvlßÜtnφ obrßzek jako jejφ podklad. Malß ukßzka:
<HTML> P°φÜt∞ se podφvßme na vlastnosti ovliv≥ujφcφ formßtovßnφ celΘ strßnky.
| <<< | COMPUTERWORLD | IDG CZ homepage | |