Úvod
Kaskádové styly (angl. Cascading Style Sheets, zkratka CSS) jsou nadstavbou jazyka HTML určenou k definování vzhledu WWW stránek. V současnosti je platnou normou verze CSS2 a alespoň její jádro je podporováno většinou nových grafických prohlížečů (MSIE 5+, Netscape 6+, Mozilla, Opera 5+ a další). Většina prohlížečů ale podporuje jen určité funkce CSS2, případně pouze CSS1; obecně ještě není CSS2 plně podporováno nikde a v práci s CSS obsahují navíc prohlížeče mnoho chyb. Stupeň implementace CSS v různých prohlížečích je uveden v této tabulce.
- Základní odkazy:
- Škola CSS na W3C - http://www.w3.org/Style/CSS/
- Specifikace CSS2 - http://www.w3.org/TR/REC-CSS2
- Specifikace CSS1 (staré) - http://www.w3.org/TR/REC-CSS1
- Přehled podpory CSS v prohlížečích
CSS umožňují přiřadit každému prvku v HTML určité vlastnosti (vzhled, způsob zobrazení či jiné prezentace, umístění atd.),
a to v závislosti na druhu zařízení, na němž je WWW dokument prezentován (obrazovka počítače, TV, tiskárna, kapesní počítač,
mobilní telefon, slepecký výstup, zvukový výstup atd.). Dále umožňují definovat vlastnosti pro třídy a identifikátory
- objekty v HTML dokumentu, jejichž třída nebo identifikátor odpovídají těm z definic v CSS, potom tyto vlastnosti přebírají.
Způsoby použití
Definice CSS mohou být součástí HTML dokumentu nebo mohou být v samostatném souboru. K HTML dokumentu jsou potom připojeny
během jeho načítání do prohlížeče. Možnosti definování stylů jsou:
- 1. Přímo v HTML dokumentu, v části označené párovou značkou
<STYLE> v sekci <HEAD>:
<HEAD>
...
<STYLE type="text/css">
seznam pravidel
</STYLE>
...
</HEAD>
- 2. V konkrétní značce (tagu) v HTML dokumentu:
<XXX ... style="seznam vlastností">
- 3. V externím souboru; soubor se načítá pomocí
<LINK> v sekci <HEAD>:
<HEAD>
...
<LINK rel="stylesheet" type="text/css" href="cesta_k_souboru">
...
</HEAD>
- 4. V externím souboru; soubor se načítá CSS direktivou
@import v sekci <STYLE> (pouze v CSS2):
<STYLE type="text/css">
@import url("cesta_k_souboru");
...
</STYLE>
V externím souboru je přitom seznam pravidel, stejně jako v sekci <STYLE>. Syntaxe definic CSS je popsána
v další části.
Javascript
Načtené CSS definice (tabulky stylů, angl. stylesheets) jsou uloženy v poli document.styleSheets[]. Každá
položka v poli odpovídá jedné sekci <STYLE> (včetně souborů načtených direktivou @import),
nebo jednomu souboru načtenému pomocí příkazu <LINK>. Pořadí položek v poli pak odpovídá pořadí načítání
CSS. Obecně podporovaná je pouze vlastnost disabled, která (de)aktivuje daný stylesheet.
document.styleSheets[n].disabled = true | false
Praxe
Seznam CSS vlastností lze uvést přímo v HTML značce (tagu). To má smysl jen u příležitostného stylování. Příklad:
<P style="color:red; text-align:right">Můj podpis</P>
V sekci <STYLE> v záhlaví lze definovat současně styly pro celý dokument. Kvůli kompatibilitě se starými prohlížeči
je zvykem styly skrýt do komentáře, obdobně jako se to dělá ve značce <SCRIPT>. Příklad:
<STYLE type="text/css>
<!--
H1 { color:blue }
P { color:#404040; text-align:justify }
...
-->
</STYLE>
Nejlepší je uložit definice do samostatného souboru. Lépe se pak spravují a jedna tabulka stylů navíc může být společná
pro celý web. Vzhled mnoha stránek se pak snadno změní zásahem do jediného souboru. Příklad:
<LINK REL="stylesheet" type="text/css" href="/lib/moje.css">
nebo
<STYLE type="text/css>
<!--
@import url=("/lib/moje.css");
-->
</STYLE>
Druhá možnost je pak výhodná tehdy, chceme-li, aby námi definované styly načetl pouze prohlížeč, který již podporuje
CSS2 - starší prohlížeče tento příkaz neznají a tabulku stylů nenačtou.
Načtené tabulky stylů můžeme i vypínat a zapínat pomocí sktiptů. Příklad:
<LINK REL="stylesheet" type="text/css" href="modre.css">
<LINK REL="stylesheet" type="text/css" href="cervene.css">
...
<script type="text/javascript">
function ZmenCSS(x) {
document.styleSheets[0].disabled = (x!='m');
document.styleSheets[1].disabled = (x!='c');
}
</script>
...
<button onclick="ZmenCSS('m')">Stranka v modrem stylu</button>
<button onclick="ZmenCSS('c')">Stranka v cervenem stylu</button>
...
Staníček Petr
|
