Co je CSS? Jak ho použít?

Co je CSS? Jak ho použít?

CSS - Cascading Style Sheets, též také nazývano Kaskádové Styly. Vznik této skvělé funkcionality se datuje cca kolem roku 1997. CSS slouží k formátování webových stránek HTML, XHTML, nebo také XML. Je to naprosto skvěle vymyšleno a tuto dovednost by si měl osvojit každý webmaster, už jen pro tu naprostou jednoduchost, kterou dáte vašim webům jednotnou tvář. Hlavním smyslem CSS je právě možnost, aby webmaster jednoduchým způsobem byl schopen oddělit obsah webu od jeho designu. V případě, že máte správně navržený web, pak vám stačí kolikrát třeba i jen půl hodiny na to, abyste kompletně změnili kompletní design rozsáhlého webu.

V první řadě je potřeba říci, že máte tři možnosti jak CSS definici použít. Ačkoliv z pohledu programátora je pouze jediná správná! Ono se to jaksi moc neříká nahlas, ale pokud použijete HTML validator, pak velice brzy zjistíte v čem je problém a že v podstatě máte jen jednu možnost jak to udělat správně. Nejprve vám tedy prozradím všechny tři varianty a následně vysvětlím proč používat jen tu jednu.

- První možností je nadefinování přímo v HTML elementu přes atribut STYLE.
- Druhá možnost je definice stylopisu v hlavičce stránky a následné použití stylopisu v HTML elementu.
- Třetí varianta je vytvoření externího CSS souboru, následně jeho připojení k HTML dokumentu a v HTML tagu použití konkretního identifikátoru stylu.

Varianta 1: Definice v HTML elementu přes atribut style.

<p style="color: white; background-color: navy">Tento odstavec bude modrý, písmo bílé. </p>

ukazka:

Tento odstavec bude modrý, písmo bílé.

Varianta 2: Definice stylopisu v hlavičce stránky a následné použití stylopisu v HTML elementu.

Do hlavičky HTML dokumentu nejprve nadefinujte styl.

<style>
  p {color: white; background-color: navy; }
</style>

Následně se tento styl aplikuje na všechny odstavce v HTML dokumentu. Stačí jen abyste použili nadefinovaný styl.

<p>Tento odstavec bude modrý, písmo bílé. </p>

Varianta 3: Externí CSS soubor

Nejprve musíte vytvořit soubor CSS, například: style.css
V tomto souboru nadefinujete styly pro jednotlive HTML elementy, pro jednoduchou ukázku použiji opět stejně definovaný odstavec.

p {
  color: white;
  background-color: navy;
}

Následně musíte tento CSS soubor připojit k HTML dokumentu, na to vám stačí jednoduchý zápis do hlavičky HTML dokumentu:

<link rel="stylesheet" type="text/css" href="style.css">

Od této chvíle bude vaše webová stránka zobrazovat všechny odstavce modré, text bude bíle barvy.

<p>Tento odstavec bude modrý, písmo bílé. </p>

Tak máme za sebou tři možnosti definice CSS a nyní je ta prává chvíle, abych vám sdělil: Používejte pouze variantu 3 (Externí CSS soubor). Důvody jsou poměrně jednoduché, pokud použijete první dvě varianty, naprosto reálně neprojdete HTML validátorem. Inline styly jsou zkrátka HTML nevalidní, samozřejmě bez problémů fungují, webové prohlížeče si s tím hravě poradí. Tak kde je tedy zakopaná fena? :D
Opět naprosto jednoduchá odpověd, pokud totiž nepoužijete externí soubor, pak musíte styly nadefinovat přímo do html kódu, což ovšem znamená, že při každém načtení stránky naprosto zbytečně přenášíte data, která vlastně stačí načíst pouze jednou a to při prvním načtení webu. Proto HTML validátor toto vyhodnotí jako neoptimalizovaný HTML kód a vyhodí vám inline styly jako chybu.

Další základní užitečná informace je fakt, že v rámci webové stránky můžete CSS externích souborů načíst klidně několik, pokud tedy budete mít tu potřebu. Občas se to může hodit třeba právě proto, aby se zbytečně nepřenášela data, které momentálně zobrazovaná webová stránka nepotřebuje.

<link rel="stylesheet" type="text/css" href="hlavni.css">
<link rel="stylesheet" type="text/css" href="doplnujici.css">

V okamžiku kdy do hlavičky napíšete toto, pak web při načítání stáhne hlavni.css, doplnujici.css a samozřejmě pokud se v html tagu odkážete na definici ať v jednom, či druhém, budete k vaší spokojenosti obslouženi. ;)

Ovšem pozor, pokud chcete mít optimalizovaný kód, pak připojujte co nejméně externích souborů. CSS vám v pohodě stačí jedno, klidně jich můžete mít i víc, nicméně pokuste se je více sdružovat aby jich bylo co nejméně. To samé platí o případných java scriptech. Klidně si můžete říci že to je naprosto jedno, ale není!
Z pohledu funčnosti webu zajisté pravdu máte, stránka se načte, všechno bude krásně fungovat, budete mít pocit jak máte přehledný kód, že máte 30 java scriptů hezky rozdělených a k tomu 10 css souborů.. :D

No a každý externí soubor co je definován ve vašem html bude mít za následek celkové zpomalení načítání stránky, pokud jich je tam pár, pak to moc ničemu nevadí. Ale pokud jich tam budete mít několik desítek, tak už to znát bude.

Jde o to, že prohlížeč nejprve načte html soubor a pak začne stahovat potřebné externí soubory, při každém stahovaném souboru musí prohlížeč provést GET na server na kterém je soubor uložen. Pokud bude mít server odezvu 50ms na GET, pak při deseti stahovaných souborech máte zpoždění 0,5 vteřiny. Záleží dost na rychlosti serveru na kterém jsou data uložena a jak je ten server momentálně vytížen. Ale už jsem viděl mnoho webů, které takto promrhávají čas, kolikrát třeba i 2 vteřiny. A to mi přijde dost smutné. Tuto problematiku ale budu někdy příště podrobněji rozebírat v příspěvku: Optimalizace webových stránek.