 |
Jak už jsem řekl v úvodu, styly se dají použít trojím způsobem:
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říklad s odkazy: pseudotřídy - Příklad s odsazením - Externí stylopis - Vlastní styly - Přímý styl
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.
<html>
<head>
<title>První příklad se stylopisem</title>
<style><!--
h2 {color: blue; font-style: italic}
--></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}
Pokud nechcete studovat další příklady, můžete se rovnou podívat na seznam možných CSS vlastností a jejich hodnot.
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.
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šší.)
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}
Nyní si vytvořím stránku, do které vložím odkaz na soubor pokus.css:
<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 ....
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ý.
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. Externí css soubor správně začíná rovnou
první deklarací bez jakýchkoli hlaviček, např. body {color: black}
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.
Namísto tagu <link rel="stylesheet" href="pokus.css"> lze použít zápis
<style>
@import url('pokus.css');
</style>
Nefunguje to v Netscape 4 (čehož se dá i využít). Všimněte si středníku na konci zápisu.
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.
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:
<p style="text-align: center">Text odstavce ... ... ... </p>
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.
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:
<body>
... <!--normální odstavce -->
<div style="color: maroon">
... <!-- mnoho různých odstavců, všechny budou hnědé -->
</div>
...<!-- a už je to zase normál -->
Vypadá to takhle. A druhý příklad:
<p>Normální text a <span style="font-style: italic">text kurzívou</span> a
zase normální text.</p>
se zobrazí takto:
Normální text a text kurzívou a zase normální text.
Další: seznam vlastností CSS nebo vlastní třídy.
Předchozí: strukturování textů
Vizte též: úvod do CSS, grafické filtry, CSS pozicování, seznam definic CSS, různé
barvy odkazů, zápis stylu pro různé prohlížeče, odlišné
formátování tisku
|
Hledání
Jak psát web:
http://dusan.pc-slany.cz/internet/
Píše Yuhů: autorova stránka,
mail: dusan@pc-slany.cz
Poslední aktualizace 07.12.2002