CSS - kompletní průvodce

Autor: Petr Staníček | Vydal: Computer Press, 2003

Příklady

Příklad 1 (kapitola 1)
Ukázka možností formátovaní jediné stránky

• Stránka obsahující všechny styly. Obsahuje Javascript umožňující přepínat mezi jednotlivými styly, aby bylo patrné, že se jedná stále o tutéž stránku, jejíž vzhled ovlivňují pouze použité kaskádové styly (CSS). Pokud váš prohlížeč Javascript nepodporuje, nebo se stránka zobrazuje chybně, použijte následující odkazy.
• Samostatné stránky s jednotlivými styly. Je to vždy stejný dokument HTML, k němuž je pokaždé připojen jiný soubor CSS.
  • Stránka beze stylů
  • Jednoduché formátování 1 [zobrazit soubor CSS]
  • Jednoduché formátování 2 [zobrazit soubor CSS]
  • Formátování s menu [zobrazit soubor CSS]
  • Komplexní formátování 1 [zobrazit soubor CSS]
  • Komplexní formátování 2 [zobrazit soubor CSS]

Příklad 2 (kapitola 2):
Ukázka přechodu na formátování pomocí CSS

Příklad 2a - původní stránka

Stránka, kterou jsme použili jako předlohu. K formátování ještě používá tabulky (i několikanásobně vnořené) a zastaralé formátovací značky HTML.
Zobrazit příklad 2a

Příklad 2b - převedená stránka

Z původní stránky byl převzat pouze její obsah a byl převeden do strukturovaného dokumentu beze snahy o jakékoli formátování. Tato stránka se zobrazí korektně v jakémkoli (i v tom nejjednodušším prohlížeči).
Zobrazit příklad 2b

Příklad 2c - formátování textu

Ke stránce byla připojena jednoduchá tabulka CSS, definující styl textu. Nezabývá se rozměry a pozicí bloků (ty ponechává ve výchozím formátování), předepisuje pouze formát textu (styl, barvu a velikost písma, zarovnávání).
Zobrazit příklad 2c | zobrazit použitý soubor CSS

Příklad 2d - formátování bloků

Předpis CSS byl rozšířen o formátování bloků. V CSS jsou již kromě stylu textu definovány také rámečky, styl pozadí a rozestupy mezi bloky.
Zobrazit příklad 2d | zobrazit použitý soubor CSS

Příklad 2e - plovoucí prvky

Stránka byla pomocí stylů doplněna o plovoucí prvky. Obrázek v textu a oblast "Novinky" jsou nyní obtékány a vzhled stránky se již blíží původní předloze.
Zobrazit příklad 2e | zobrazit použitý soubor CSS

Příklad 2f - výsledné formátování

Nyní již předpis stylů obsahuje všechny potřebné definice a vzhled stránky je finální. V prohlížeči podporujícím korektně normu CSS se stránka zobrazí prakticky stejně jako původní předloha. Její kód je však kratší, přehlednější, je zachována logická a sémantická struktura obsahu, stránka nevyžaduje žádný Javascriptový kód (např. pro zpracování dynamických tlačítek v menu) a zobrazí se v každém prohlížeči (i bez podpory CSS).
Zobrazit příklad 2f | Zobrazit příklad 2f bez CSS | zobrazit použitý soubor CSS

Příklad 2g - výsledek včetně úprav pro chybně pracující prohlížeče

Výsledný kód byl ještě upraven tak, aby se stránka zobrazovala korektně i v prohlížečích, které CSS zpracovávají chybně. Pomocí postupů zmíněných v kapitole 5 jsme obešli některé známé chyby v často používaných prohlížečích (např. MSIE5/Windows). V této podobě již stránka může být použita bez výrazných problémů.
Zobrazit příklad 2g | Zobrazit příklad 2g bez CSS | zobrazit použitý soubor CSS