CSS

CSS (Cascading Style Sheets) se využívají k formátování obsahu HTML, XHTML a XML dokumentů.

Forma x obsah

Dnešním trendem tvorby webů je striktní oddělení formy od obsahu. Zjednodušeně řečeno o obsah se stará HTML a o vzhled (formu) CSS soubor.

Soubor s příponou css tedy zajišťuje vzhled. Je s HTML souborem/soubory propojen (někdy je CSS psáno přímo do HTML souboru) a oba jsou pak nabídnuty prohlížeči, aby se s nimi nějak vyrovnal a vykreslil je.

CSS soubor také vytváříme ve stejném editoru jako HTML soubor, avšak sám o sobě nemá význam, musí být spojen právě s ním. Aneb HTML soubor může sám o sobě existovat a být plně funkční, CSS soubor však ne.

Nabízejí prakticky neomezené možnosti formátování a samotná údržba webových stránek je velice jednoduchá.

Možnosti formátování textu

Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Dnes máme dva různé způsoby jak fomátovat:

Pomocí HTML značek (například kurzíva ), které se dnes již považují za zastaralé. V kódu moderního webu tyto značky již určitě nenajdete, protože pomocí nich prostě některé věci neuděláme.
Kaskádovými styly, které jsou sice trochu složitější, ale nabízejí velmi široké spektrum možností.

Kaskádové styly tedy vlastně slouží k formátování obsahu HTML. Formátováním máme na mysli třeba barvu a velikost písma, pozadí, zarovnání, formátování nadpisu atd.

Co získáte

Pokud místo tabulek použijete CSS styly:

Můžete opět vyrábět strukturované dokumenty. Použitím CSS oddělíte obsah stránky (HTML) od jejího vzhledu (CSS); stránky budou dobře čitelné ve starých a neobvyklých prohlížečích, budou dobře strojově (a nejen strojově) zpracovatelné.
Získáte přehledný a jednoduchý kód stránky.
Díky oddělení formy od obsahu bude velmi snadné kompletně změnit vzhled celého webu pouhou změnou v CSS.
Výrazně zmenšíte datovou velikost stránky; použitím CSS (zvláště pak v externím souboru) může klesnout objem přenášených dat i výrazně pod 50%.
Stránky se budou načítat rychleji – prohlížeče nemusí čekat, až se načte celá uzavírací tabulka, ale vykresluje objekty tak, jak se načítají; pořadí a způsob zobrazování můžete navíc významně ovlivnit sami.
Pokud si najdete postupy, které dostatečně fungují i v rádoby-CSS-prohlížečích, prakticky nemusíte stránky ladit v mnoha různých klientech na různých platformách.

Proč vzniklo

Základním důvodem je především omezená formátovací schopnost HTML. Nastavit u textu font, velikost, řez a barvu je opravdu málo a s některými objekty neuděláte pomocí html vůbec nic.

CSS umožní upravovat každý prvek na webu, cokoliv může získat rámeček, barvu pozadí, texturu či speciální umístění vůči zbytku stránky.

Ke vzniku CSS napomohl také trend oddělovat od sebe obsahovou a designovou složku webu. Pokud píšete dokument v čistém HTML, musíte psát formátování rovnou do textu. To vede k nepřehlednosti kódu a zpětná úprava vzhledu je pracná ne-li nemožná.

Naopak pokud využijete styly, tak se HTML kód omezí pouze na rozložení stránky ve smyslu: toto je hlavní nadpis, toto je podnadpis, toto je normální odstavec, tento text je důležitý, toto je postranní lišta.

K takovému dokumentu pak připojíte externí soubor se styly, který určí, jak má vypadat hlavní nadpis, podnadpis, normální text a že postranní pruh se zobrazí jako postranní. Změny ve vzhledu se pak provádí pouze úpravou CSS souboru, do HTML kódu se vůbec nemusí sahat.

Nevýhody

CSS má ovšem taky určité nevýhody. Tou základní je podpora prohlížečů. Tedy nejčastější prohlížeče jako Firefox, MSIE nebo Opera všechny základní parametry podporují (kromě těch amatérských jako je třeba blink), ovšem problém spočívá v tom, jak! Každý totiž reaguje na danou vlastnost kapánek jinak a v celkovém designu se to nakonec projeví docela razantně.

Příklad: pokud vytvoříte odstavec 100*100px a přiřadíte mu rámeček tlustý 1px, v IE bude rámeček součást plochy, tedy rozměry budou pořád stejné, ale ve Firefoxu se rámeček jakoby nabalí na ten čtverec a ten má potom rozměry 102 * 102. Záleží také na verzi uvedených prohlížečů, takže vám se to třeba nestane, mně to ovšem udělalo dost problémů.

Jak začít

HTML a práce ve dvou programech

S HTML se pracuje tak, že se jeden a tentýž soubor otevře ve dvou různých programech.

Najděte si HTML soubor na disku. Otevřete ho v prohlížeči, nejčastěji prostě dvojklikem (prohlížeč je výchozí otevírací program)
Jděte znovu na disk a tutéž stránku otevřte v Poznámkovém bloku nebo jiném editoru.

Nyní by měl být stav ten, že v jednom programu je soubor otevřený v prohlížeči (např. Internet Explorer, Firefox), ve druhém programu je soubor otevřený v editoru (např. tedy Poznámkový blok). Nyní:

Změňte obsah v editoru.
Uložte.
Přepněte se do prohlížeče.
Obnovte stránku (např. klávesou F5). Měla by být vidět změna.

Pokud píšete dokument v čistém HTML, musíte psát formátování rovnou do textu. To vede k nepřehlednosti kódu a zpětná úprava vzhledu je pracná ne-li nemožná.

Pokud pro formátování HTML dokumentu využijete styly, tak se HTML kód omezí pouze na rozložení stránky ve smyslu: toto je hlavní nadpis, toto je podnadpis, toto je normální odstavec, tento text je důležitý, toto je postranní lišta.

K takovému dokumentu pak připojíte externí soubor se styly, který určí, jak má vypadat hlavní nadpis, podnadpis, normální text a že postranní pruh se zobrazí jako postranní. Změny ve vzhledu se pak provádí pouze úpravou CSS souboru, do HTML kódu se vůbec nemusí sahat.

V jednom programu máte nyní otevřený HTML soubor v prohlížeči, ve druhém programu je soubor otevřený v editoru (např. Poznámkový blok) a ve třetím programu máte otevřený CSS soubor v editoru (např. Poznámkový blok).

Po provedení jakýchkoliv změn (ať už v HTML nebo CSS souboru) je potřeba dané změny uložit, přeponout se do prohlížeče a obnovit stránku pro shlédnutí změny.

Více informací:

CSS – kompletní příručka kaskádových stylů Interval.cz