22. HTML – použití kaskádových stylů

13. května 2009 v 15:13 |  PC
Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu.

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, zdůrazně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.

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í:
<!--[if IE]> = Podmínka - pokud prohlížeč stránky je IE /Internet Explorer/, vlož do stránky kód, který se nachází mezi <!--[if IE]> a <![endif]-->, 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

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; 
      } 

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; 
 } 
 </style> 
- tento způsob se ovšem nedoporučuje
background color je barva pozadí (stačí napsat pouze background)
 

Buď první, kdo ohodnotí tento článek.

Nový komentář

Přihlásit se
  Ještě nemáte vlastní web? Můžete si jej zdarma založit na Blog.cz.
 

Aktuální články

Reklama