Cascading Style Sheets

Z Multimediaexpo.cz

Nuvola mimetypes source css.png

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. Byly vydány zatím dvě verze specifikace CSS1 a CSS2 (plus CSS 2.1), 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

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

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 vůči 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.

Nevýhody

Hlavní nevýhodou CSS je zatím stále špatná podpora v majoritních prohlížečích. Různé prohlížeče interpretují stejný CSS kód jinak a je někdy velmi obtížné jej napsat tak, aby se na všech (resp. na několika vybraných) prohlížečích výsledek zobrazil stejně. Situace se ale v roce 2006 značně zlepšuje, v souvislosti s tím se s napětím očekával příchod Internet Exploreru 7, který by měl postupně vytlačit svého předchůdce IE 6, který byl častým zdrojem problémů. Nicméně ani IE 7 se striktně nedrží definice CSS 2.1.

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ů */
   }

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)

Externí odkazy


Citováno z „http://ww.multimediaexpo.cz/mmecz/index.php/Cascading_Style_Sheets“