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-bottom: 0px;
margin-top: 0px

}

p {

text-indent: 30px;

margin:
0px} /*Ještě jednou pro Netscape */


--></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: