CSS prakticky

V tomto textu nap°ed ukß╛u, jak se styly zapisujφ do stylopisu. Dal╣φ dva zp∙soby p°ijdou pozd∞ji.

P°φklad s nadpisy

P°i psanφ text∙ se sna╛φm pou╛φvat nadpisy. V HTML se na to pou╛φvajφ tagy <H1> a╛ <H6>. P°itom t°eba to, co je mezi tagy <H2>... </H2> je text nadpisu druhΘ ·rovn∞. CSS mi umo╛≥uje v╣echny takovΘ nadpisy jednotn∞ zformßtovat, t°eba aby byly modrΘ a kurzφvou.

--></style>


</head>


<body>


<h1>Hlavnφ nadpis</h1>


<h2>Nadpis druhΘ ·rovn∞</h2>


<p>Odstavec s normßlnφm textem</p>


<h2>Dal╣φ nadpis druhΘ ·rovn∞</h2>


<p>Odstavec s dal╣φm textem, kter² by se m∞l formßtovat normßln∞.
</p>


</body>


</html>

Tento p°φklad si m∙╛ete zobrazit v prohlφ╛eΦi. Do hlaviΦky dokumentu je zapsßn stylopis (angl. stylesheet [stajl╣φt]). Je obalen tagy <style> a </style>. (Navφc je je╣t∞ "zapouzd°en" do poznßmky kv∙li star╣φm prohlφ╛eΦ∙m, aby to nezobrazovaly. Nov∞j╣φ prohlφ╛eΦe v∞dφ, ╛e poznßmka za tagem <style> vlastn∞ nenφ poznßmkou, ale stylopisem. Toto druhΘ zapouzd°enφ tedy nenφ ·pln∞ nutnΘ.) Co ale znamenß ten magick² °ßdek:
h2 {color: blue; font-style: italic}

P°φklad s odkazy :pseudot°φdy

Pomocφ stylopis∙ se dajφ formßtovat libovolnΘ HTML tagy, ne pouze nadpisy. Obzvlß╣╗ efektnφ je to u odkaz∙. Nebudu vypisovat cel² zdroj, omezφm se na stylopis:

<style><!--


a         {text-decoration: none}


a:link    {color: green}


a:visited {color: navy}


a:active  {color: black}


a:hover   {color: red; text-decoration: underline}


--></style>

Cel² soubor s tφmto stylopisem si m∙╛ete zobrazit. Setkßvßme se tu s deklaracφ formßtu odkaz∙ -- vnit°ku tagu <a> </a>. Navφc tento tag mß pseudot°φdy (r∙znΘ stavy), kterΘ umo╛≥ujφ r∙znΘ zobrazenφ podle toho, zda u╛ je odkaz nav╣tφven² nebo zda po n∞m jede my╣. Tak╛e konkrΘtn∞:

Tag A je jedin², u n∞ho╛ se vyskytujφ pseudot°φdy. Je╣t∞ pozor na syntaxi: mezi a a dvojteΦkou nenφ mezera!

Prvnφ °ßdek stylopisu definuje nepodtrhßvßnφ odkaz∙ pro v╣echny pseudot°φdy. Pouze a:hover tuto deklaraci p°ebφjφ, proto╛e je uvedena pozd∞ji.

P°φklad s odsazenφm

Ve st°ednφ Evrop∞ je zvykem zaΦφnat odstavec odsazenφm prvnφ °ßdky. Proto╛e v Americe je to jinak, (tam se to d∞lß vertikßlnφ mezerou p°ed odstavcem) prohlφ╛eΦe takovΘ ΦeskΘ zobrazenφ nepodporujφ. Naopak generujφ nep°φjemnΘ mezery mezi odstavci. CSS umo╛≥ujφ nadefinovat formßt odstavce tak, aby vyhovoval Φesk²m zvyklostem. Do stylopisu se napφ╣e:

<style><!--


p    {text-indent: 30px; margin:
0px} /*Nap°ed pro Netscape */


p    {text-indent: 30px;

margin-bottom: 0px;
margin-top: 0px

}


--></style>

Zobrazte si tento p°φklad v prohlφ╛eΦi. Text-indent je odsazenφ prvnφho °ßdku a margin jsou okraje. Margin-top je hornφ okraj, margin-bottom okraj spodnφ. Tφmto zp∙sobem se dajφ odsazovat v╣echny odstavce, takto jsou formßtovßny moje domovskΘ strßnky. (Je╣t∞ pozor na prohlφ╛eΦ: toto umφ jen verze 4 a vy╣╣φ.)

Externφ stylopis

Kdyby se m∞l do ka╛dΘ strßnky zadßvat stylopis, byla by to nuda. My╣lenka CSS naopak poΦφtß s tφm, ╛e se definice styl∙ umis╗uje do externφho souboru, kter² se pak u╛ jenom odkazuje. Prost∞ mφsto toho, abych psal stylopis do hlaviΦky ka╛dΘ strßnky, napφ╣u jej do n∞jakΘho novΘho souboru (t°eba v Notepadu) a ulo╛φm s p°φponou css. Potom mohu libovoln∞ mnoho strßnek na tento css soubor nalinkovat.

Dejme tomu, ╛e jsem si vytvo°il soubor pokus.css. Mß t°eba tento obsah (vlo╛il jsem sem v╣echny ji╛ zmφn∞nΘ definice):




p    {text-indent: 30px; margin: 0px 0px 0px 0px, }


a        {text-decoration: none}


a:link   {color: green}


a:visited {color: navy}


a:active {color: black}


a:hover  {color: red; text-decoration: underline}


h2     {color: blue; font-style: italic}


h1    {color: green; align: center}




<html>


<head>


<title>Strßnka s externφm stylopisem</title>


<link rel="stylesheet"
type="text/css" href="pokus.css">


</head>





<body>


<h1>Extern∞ stylovanß strßnka ....

ATD.

M∙╛ete se podφvat, jak se vßm to zobrazφ v prohlφ╛eΦi. Ve zdroji tohoto p°φkladu je d∙le╛it² °ßdek, kter²m se css soubor do strßnky "linkuje". Syntaxe, jak jsem ji napsal, je zßvaznß (samoz°ejm∞ je t°eba zm∞nit cestu k css souboru), ale ten atribut type je zbytn².

Zßludnost

Externφ stylopis nezaΦφnejte tagem <style>. Jednak se to nemß (aΦkoliv n∞kterß literatura to uvßdφ ), jednak Internet Explorer 4 potom ignoruje prvnφ deklaraci.

Zßludnost #2

Zkou╣φte-li novΘ externφ stylopisy tak, ╛e je ulo╛φte a obΦerstvφte linkovanou strßnku, m∙╛e se stßt, ╛e se neprojevφ zm∞na. Prohlφ╛eΦe si toti╛ dr╛φ v cache pam∞ti minulou verzi stylopisu. Neznßm zp∙sob, jak ji z tΘ pam∞ti snadno vyhodit (smazßnφ temporary files nepomßhß v╛dy). Proto doporuΦuji ladit nap°ed na n∞jakΘ strßnce internφ stylopis a a╛ kdy╛ funguje, zkopφrovat jej do externφho.

Vlastnφ styly

Kdyby se daly definovat formßty jenom pro zßkladnφ HTML tagy, byla by to p∞knß nuda. Proto existujφ "t°φdy" a "identifikßtory". Dajφ se deklarovat i styly tag∙ vlo╛en²ch do jin²ch tag∙. Popis t∞chto ╣pek∙ je na del╣φ Φtenφ. Zatφm tedy jen hlßsφm, ╛e to jde.

P°φm² styl

CSS se dß pou╛φt ve zdroji i p°φmo u stylovanΘho elementu. Pova╛uji to za nejmΘn∞ v²hodnΘ. P°esto se to obΦas pou╛ije. Dejme tomu, ╛e chci odstavec zarovnat na st°ed strßnky (a nebudu to d∞lat HTML atributem align="center"). Napφ╣u:

Tak╛e "style" je atribut HTML tagu a jeho hodnotou je deklarace stylu {bez slo╛en²ch zßvorek}, ale v uvozovkßch. Je to atribut obecn², kter² se m∙╛e pou╛φt u jakΘhokoliv tagu, u kterΘho to mß smysl.

Tagy <span> a <div>

N∞kdy je ale pot°eba zformßtovat kus textu, kter² nenφ vymezen ╛ßdn²m konkrΘtnφm tagem. Proto se tam vlo╛φ nov² tag (proΦ ne, ╛e). Zahrnuje-li formßtovanß oblast vφce odstavc∙, pou╛ije se pßrov² tag <div>, v rßmci jednoho odstavce se pou╛φvß <span>, proto╛e <div> by to roztrhal do vφce odstavc∙. Nap°φklad: