Lekce 1 - Úvod do CSS3

Vítejte u první lekce kurzu CSS3 (Cascading Style Sheets), ve kterém se budeme zabývat problematikou stylování webových stránek, neboli front-endem. Pro začátek si povíme něco o samotném CSS a k čemu slouží. Zmíníme také historii a způsoby propojení stylů k HTML dokumentu. V tomhle kurzu budeme probírat pouze CSS3, ale je očekávaná i znalost HTML5. Jestliže s tvorbou webů teprve začínáme, bude lepší si nejprve projít kurz tvorby webových stránek krok za krokem.

CSS

Jednoduše řečeno, pomocí CSS se říká jaký styl se má přiřadit k HTML prvkům. Ať už je to barva, centrování textu na střed, animace (ano, v CSS můžeme dělat i animace) nebo pozicování samotných prvků HTML.

Nejdříve si ale položíme otázku: Proč vlastně stylovat web? Podle různých výzkumů si návštěvník udělá první dojem webu už během 2-3 vteřin. Posuďte sami, jestli rádi trávíte čas na webu, kde jsou sladěné barvy a vše je přehledně tam kde má být nebo si radši vyberete odfláknutý web vytvořený před 10 lety, kde je vidět, že autor CSS stylům moc nerozuměl. Odpověď je více než jasná. Mimochodem, ta horší varianta nás tady určitě nečeká.

Výborný design může vypadat například takto:

A ten nejhorší web design největšího kalibru může vypadat třeba následovně:

Web Rona Oslunda, které patří do muzea web designu.

Můžeme posoudit sami, co je ta lepší varianta

Něco málo z historie

Než se pustíme do konkrétní problematiky stylování, určitě stojí za to poznat, s čím máme vlastně tu čest.

Ze začátku byla podpora stylů ze stran prohlížečů katastrofální, mluvíme zde o CSS1 (také známo jako CSS level 1). Zde byla pouze hrstka vlastností, které se daly upravovat (vlastnosti písma, barvy textu a pozadí, způsoby zobrazení prvků). A navíc všechny tyto vlastnosti nebyly podporovány u prvních verzí prohlížečů jako je Internet Explorer a Netscape.

Poté přišlo doporučení CSS2 a nástup byl mírně komplikovaný. Na scéně byla spousta nových prohlížečů, ale žádný z nich nepodporoval z CSS2 všechno. Nejlépe na tom byla Mozzila, která se snažila dodržovat standardy w3.org. S CSS2 přišly také nové možnosti stylování, například vlastnosti max-height, max-width, min-height, min-width - minimální a maximální šířka nebo výška elementu, cursor - kurzor nad elementem,, position - pozicování elementu v řádku, v bloku, absolutně a relativně.

Následným nástupem CSS3 se vše změnilo. Určitě víme, že stylováním nezvládneme postavit celou webovou stránku, ale je to rozhodně důležitá část tvorby webových stránek.

Výhody, nevýhody a limity CSS

Všechno na světě má své plusy i mínusy a CSS není výjimkou.

Výhody

Jeho hlavní výhodou je jednodušší údržba webové prezentace. Pokud chceme změnit nějaký detail, jako třeba barvu nadpisu, nemusíme složitě procházet HTML kód nebo různé HTML šablony, ale můžeme změnit pouze jednu vlastnost v CSS souboru, který je přilinkován ke všem stránkám. Díky možnosti přilinkování CSS souboru k HTML, se nám ukazuje další výhoda a to oddělení těchto dvou jazyků. Další výhodou je cachování stylů. Webový prohlížeč si může soubor se styly uložit do paměti cache (dočasná paměť), čímž může být dosaženo zrychlení načtení stránky. Vlastnosti jednotlivých elementů můžeme také dynamicky měnit pomocí Javascriptu.

Nevýhody

Hlavní nevýhodou CSS je podpora prohlížečů. Prohlížeč nemusí nějaké CSS vlastnosti vůbec podporovat. Prohlížeč má také defaultně nastavené vlastní styly pro hlavní prvky webu a náš web tak může vypadat na různých prohlížečích trošku jinak (můžeme však styly tzv. vyresetovat)

Limity

Horizontální pozicování je jednoduché, naopak vertikální vyžaduje komplexnější přístup (Flexbox nebo grid). Dále v samotném CSS nejsou proměnné nebo konstanty, všechny hodnoty musí být konkrétně vepsány přímo v kódu. Toto omezení řeší preprocesory (SASS , LESS a další...).

Připojení CSS k HTML

Již víme, co je to CSS, jaké má výhody, nevýhody a limity. Nyní si ukážeme 3 způsoby jak připojit CSS k HTML.

Přímé připojení

Způsob přímého připojení (také známé jako inline styly) je nejméně používaný, ale to neznamená, že se vůbec nepoužívá. Osobně jsem jej párkrát byl nucen použít. Vždy je lepší se tomuto způsobu vyvarovat kvůli oddělení struktury HTML od stylů, čímž můžeme zvýšit přehlednost kódu. Taktéž se trošku snižuje rychlost načítání webu (cachování). Pro inline styl přidáme atribut style k HTML prvku a vložíme konkrétní styl:

<h1 style="color: blue;">Učím se na ITnetworku.</h1>

V prohlížeči se nám zobrazí toto:

Z ukázky prohlížeče je nám asi jasné, že jsme vytvořili nadpis první úrovně a přidali jsme k němu atribut style, za kterým následuje rovná se a uvozovky, do kterých se vloží CSS vlastnost a její hodnota, která je poté zakončená středníkem. V našem případě vlastnost color a hodnota blue, která říká, že nadpis bude mít modrou barvu. Když budeme chtít přidat další vlastnost, tak musíme pamatovat na středník na konci zápisu a pouze připíšeme další vlastnost, např. budeme chtít zvětšit velikost písma pomocí font-size na hodnotu 50px:

<h1 style="color: blue; font-size:50px;">Učím se na ITnetworku.</h1>

Zmenšené písmo nadpisu nás v prohlížeči asi nepřekvapí:

Interní CSS

Druhým způsobem vložení CSS je zápisem stylů do hlavičky v HTML dokumentu (mezi prvky <head> a </head>). Nejdříve musíme prohlížeči říct, že se jedná o kaskádový styl. Toho docílíme tak, že vložíme styly mezi tagy <style type="text/css"> a </style>, kde nám atribut type s hodnotou text/css říká, že se jedná o CSS:

<head>
    <style type="text/css">
        h1{ color: blue; font-size:50px; }
    </style>
</head>

<body>
    <h1>Učím se na ITnetworku.</h1>
</body>

Jak můžeme vidět, výsledek bude vzhledově stále stejný:

Všechny nadpisy první úrovně jsou modré a mají velikost 50px. Nemusí to být pouze nadpisy první úrovně. Ty stejné vlastnosti můžeme třeba přidat samozřejmě i dalším nadpisům. Pro vyzkoušení si přidáme pod nadpis první úrovně i nadpis druhé úrovně h2 a do stylů jej připíšeme také:

<head>
    <style type="text/css">
        h1, h2{ color: blue; font-size:50px; }
    </style>
</head>

<body>
    <h1>Učím se na ITnetworku</h1>
    <h2>A je to super!</h2>
</body>

V prohlížeči se tento kód vykreslí takto:

Nyní můžeme vidět, že máme dva nadpisy různých úrovní, které jsou naprosto totožné.

Připojení CSS souboru k HTML souboru

Třetím a nejpoužívanějším způsobem je připojení externího CSS souboru k HTML pomocí prvku link. Zde je nejvíce vidět oddělení struktury HTML od CSS. K tomuhle si budeme muset vytvořit nový soubor, který bude obsahovat styly. Pojmenujeme si ho klasicky jako style s koncovkou .css a přesuneme jej do nově vytvořené složky s názvem css/, která je na stejné úrovni jako náš HTML dokument. Nyní již můžeme oddělit CSS od HTML úplně. Kód v souboru style.css bude vypadat následovně:

h1, h2 { color: blue; font-size:50px; }

V hlavičce HTML dokumentu musíme tento soubor ještě připojit:

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

<body>
    <h1>Učím se na ITnetworku</h1>
    <h2>A je to super!</h2>
</body>

Všimněte si, že nikde nepoužíváme atribut style, není už totiž zapotřebí.

U odkazu link je několik atributů, které si nyní vysvětlíme. Začneme krásně zleva a to atributem rel s hodnotou stylesheet, která prohlížeči řekne, že tenhle CSS dokument určuje vzhled HTML dokumentu. Atribut type jsme si již vysvětlili o pár řádků výše, tak se jím nebudeme znovu zatěžovat. V href je uvedena cesta k našemu CSS souboru, v našem případě musíme jít ve struktuře složek o jednu úroveň níže. Kdybychom jsme potřebovali jít o úroveň výše, tak se před cestu přidají dvě tečky takto: href="../css/style.css"

Za zmínku určitě stojí i připojení externího CSS souboru z CDN (Cloud Delivery Network). Jedná se o připojení již napsaných stylů, které následně můžeme použít v našem HTML dokumentu. Známý je určitě Bootstrap. Pokud využívá toto CDN více webových stránek, styly se pravděpodobně načtou z cache a tím se zvýší rychlost načtení stránek.

Můžeme si všimnout, že všechny způsoby připojení mají stejný výsledek zobrazení na webu, ale nejvíce příjemná je určitě třetí metoda. Nikdo nechce mít v kódu nepořádek.

V další lekci, Selektory v CSS3, se uvedeme do problematiky základních CSS3 selektorů a ukážeme si i některé pseudo-selektory.