Cascading Style Sheets
Z Wikipedie, otevřené encyklopedie
CSS je zkratka pro anglický název Cascading Style Sheets, česky tabulky kaskádových stylů. Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML.
Jazyk byl navržen standardizační organizací W3C, autorem prvotního návrhu byl Håkon Wium Lie. Byly vydány zatím dvě úrovně specifikace CSS1 a CSS2, dokončuje se revize CSS 2.1 a pracuje se na verzi CSS3.
Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí.
Obsah |
[editovat] Výhody CSS
Používání kaskádových stylů ve srovnání se samotným HTML v praxi přináší výhody:
- rozsáhlejší možnosti formátování
CSS nabízí rozsáhlejší formátovací možnosti než samotné HTML. Např. pro formátování bloku textu – tj. určení vzdálenosti od jejich elementu či okraje stránky nenabízí HTML nic. CSS má vlastnosti padding a margin. V HTML by bylo potřeba vytvořit složitou konstrukci vnořených tabulek.
- konzistentní styl
Na všech stránkách webové prezentace by měly být všechny nadpisy stejné úrovně, seznamy, zdurazněné části textu apod. stejného stylu. S použitím formátovacích možností HTML je to obtížné – u každého objektu v každém dokumentu se vzhled objektu stále znovu nastavuje. S použitím CSS je to velmi jednoduché. Vytvoří se soubor stylu, který se připojuje k HTML dokumentu. Ve všech dokumentech jsou pak objekty stejného vzhledu.
- oddělení struktury a stylu
- dynamická práce se styly
Provést změnu stylu webu, který pro formátování vzhledu využívá jen možnosti HTML, znamená najít a nahradit všechny značky a změnit atributy mnoha dalších značek. V případě používání CSS znamená změna stylu webu přepsání jediného souboru – souboru stylů.
- formátování XML dokumentů
- větší kompatibilita alternativních webových prohlížečů
- kratší doba načítání stránky
Výhodou CSS oproti starému formátování v HTML je, že kód a obsah webu je uložen v souboru .html a veškerý design a formátování se načítá z jednoho souboru .css, který je většinou společný pro celý web. To znamená, že pokud máte v plánu změnu designu webu, stačí změnit pouze jeden soubor .css a změna se aplikuje na celý web. Také se soubor CSS uloží do mezipaměti prohlížeče a pokud není změněn, tak se načítá pouze jednou a zobrazení stránek se velmi urychlí.
Mohou také existovat různé styly pro různá výstupní zařízení. Webdesigner má tak možnost prostřednictvím CSS stylů dokumentu určit, jak bude vypadat na papíře, při projekci či na PDA apod. Specifikace CSS nezapomínají dokonce ani na zrakově postižené - je možno napsat styly pro hlasový syntetizátor nebo hmatovou čtečku Braillova písma.
Je také možnost upravit formátování podle prohlížeče, kterým si uživatel danou stránku zobrazuje. Jednoduše si vytvoříte více souborů .css (např. styl1.css a styl2.css) a podle prohlížeče, který si o stránku požádá, připojíte jiný soubor. Tím se dá eliminovat problém různé interpretace kódu jednotlivými prohlížeči.
[editovat] Nevýhody
Hlavní nevýhodou CSS je ne vždy dostatečná podpora v majoritních prohlížečích. Prohlížeče obsahují v implementaci CSS chyby a je někdy nesnadné napsat kód tak, aby se ve všech (resp. v běžných) prohlížečích výsledek zobrazil stejně. Situace se poslední dobou značně zlepšuje, mj. opravami chyb v prohlížečích a nástupem nových verzí Internet Exploreru.
Existuje ovšem jednoduchý kód, který se může pokusit zlepšit zobrazování generovaných stránek. Stačí do souboru, jenž generuje stránku vložit
<!--[if IE]>
<style type="text/css">
#left {
left: 150px;
}
</style>
<![endif]-->
Vysvětlení: , v našem případě #left...... <![endif]--> syntaxe ukončující kód, který se bude vkládat do webu při splnění podmínky typu prohlížeče
[editovat] Syntaxe
Stylový předpis se skládá z posloupnosti pravidel. Každé pravidlo určuje vzhled některého elementu dokumentu, nebo skupiny elementů. Pravidlo začíná tzv. selektorem, který specifikuje („adresuje“) skupinu elementů. Selektor je následován seznamem deklarací, které určují vzhled vybrané skupiny elementů. Celý seznam je uzavřen ve složených závorkách a jednotlivé deklarace jsou odděleny středníkem (tj. za poslední deklarací středník už být nemusí).
Příklad stylu:
h1 { /* vzhled nadpisu první úrovně */
margin: 5px; /* okraj šířky 5 pixelů */
font-size: 12pt /* velikost fontu 12 bodů */
}
p { /* styl odstavce */
text-align: center; /* text centrovat */
line-height: 10pt; /* výška řádku 10 bodů */
}
Selektory se dají také seskupovat tzn. dva a více selektorů, jeden seznam deklarací, oddělují se čárkou (,). Následující příklad by způsobil že prvky h1 i h2 by byly zelené:
h1, h2 {color: green;}
Se selektory se dají dělat divy např. obarvit modře jen prvek b nacházející se v prvku p (ostatní nenacházející se v prvku p ne). Zápis by vypadal takto:
p b {
color: blue;
}
[editovat] Další příklady
CSS se dá definovat i v těle stránky, například:
<h1 style="color:red; background-color:white;">nadpis</h1>
kde: h1- nadpis první úrovně, style je styl, který se píše normálně do hlavičky např.:
<style>
h1 {color:red;
background-color:white
}
background color je barva pozadí (stačí napsat pouze background)
[editovat] Externí odkazy
- CSS2 - kaskádové styly druhé generace - průvodce CSS2 (česky)
- CSS3 - kaskádové styly třetí generace - průvodce CSS3 (česky)
- Knihovna CSS - instantní kaskádové styly (hotová řešení, česky)
- Popis CSS podle W3C
- http://www.jakpsatweb.cz/css/ - tutoriál
