Kaskádové styly pro začátečníky aneb jak začít s CSS
Barbora Koďousková
·03/07/2024
·5 min.
Kaskádové styly (CSS) jsou spolu s HTML a JavaScriptem základním stavebním kamenem tvorby dynamických webových stránek i aplikací. Patří tedy mezi základní znalosti či dovednosti každého webového vývojáře. Dnes se společně na CSS podíváme trochu podrobněji. Řekneme si, k čemu se používají, co umí a základní informace, jak je používat.
Co jsou kaskádové styly (CSS)?
Kaskádové styly, anglicky Cascading Style Sheets, je jazyk určující základní grafickou podobu webových stránek a jejich rozložení. Používá se v kombinaci s HTML, XHTML nebo XML, kde popisuje způsob zobrazení jednotlivých komponent. Elementy, které CSS nedefinují zůstávají v defaultní (původní) podobě.
Struktura webu, respektive dokumentu, vytvořená v HTML tak zůstává oddělena od vzhledu. Díky tomu získáváme prostor pro snazší a komplexnější úpravy i rychlejší zobrazení obsahu stránek. Kaskádové styly se proto postupem času staly standardní náhradou původního definování prostřednictvím HTML tagů.
Výhody a nevýhody kaskádových stylů
Kaskádové styly jsou tedy modernější alternativou k původnímu rozvržení stránky prostřednictvím tabulek a specifikaci vzhledu obsahu pomocí značkovacího jazyka HTML. Tvorba webu s CSS oproti původnímu řešení nabídne následující výhody:
- rozsáhlejší možnosti formátování,
- jednodušší a rychlejší aktualizace či úprava obsahu (například úprava jednoho nadpisu H2 může ovlivnit všechny nadpisy H2),
- snazší zpracování obsahu díky oddělení struktury od stylu,
- cachování stylů a s tím i rychlejší načtení stránky,
- pokročilé úpravy CSS s využitím JavaScriptu nebo jeho frameworků,
- prostor pro responzivní weby a specifické stylování pro různá zařízení a rozlišení.
Hlavní nevýhodou kaskádových stylů vždy byla různá úroveň podpory webových prohlížečů. Stránka se tak nemusela všem uživatelům zobrazovat stejně. Určitým problémem byla také manipulace s vertikálním stylováním. S rozšířením jádra Chromium a příchodem CSS Gridu jsou však oba nedostatky v podstatě eliminovány.
Vlastnosti a využití CSS
Mezi základní vlastnosti nebo charakteristiku kaskádových stylů patří dědičnost. Vlastnost deklarovaná pro rodičovský element se díky tomu přenáší i na všechny potomky třídy. Pokud například přiřadíme odstavci červený font, tak tuto barvu automaticky převezmou všechny dědičné odstavce. Můžeme tak měnit pouze vlastnosti, které jsou specifické jen pro jeden prvek.
CSS pak najde využití při definování:
- layoutu (rozvržení),
- tabulek,
- rámečků,
- velikosti a obtékání,
- fontu a barev.
Základy syntaxe CSS
Před započetím práce s kaskádovými styly je nutné CSS soubor s původním HTML dokumentem nějakým způsobem propojit. K tomu můžeme přistoupit třemi způsoby. Prvním způsobem je použití atributu <style> přímo v HTML. Tento způsob ovšem do jisté míry eliminuje výhodu v podobě vyšší přehlednosti a strukturovanosti kódu.
Druhou variantou je vložení CSS do hlavičky webu: <style type=“text/css“> Kód stylování </style>. Zdaleka nejelegantnější je ovšem vytvoření externího souboru. V tomto případě je nutné do HTML dokumentu vložit odkaz na soubor: <link rel=“stylesheet“ ref=“soubor.css“ type=“text/css“>.
Selektory a třídy kaskádových stylů
Syntaxe CSS je založena na principu selektoru a deklarace. Selektory ve své podstatě určují konkrétní pravidla vzhledu čili prvky, ke kterým se budou vztahovat různé vlastnosti a přiřadí jim (deklaruje) specifickou hodnotu. Každá deklarace je pak oddělena spojovníkem. V kódu zapisujeme jako: Selektor {atribut:hodnota;}. Příklad:
HTML: <H2>Nadpis druhé úrovně</H2>
CSS: H2 {color:blue;}
Na místo selektoru můžeme použít řadu elementů, mimo zmíněných nadpisů například body, p, div nebo třídy, přičemž lze určit vlastnosti i pro více prvků současně: H2,H3,H4{color:blue;}. Text ve složených závorkách pak nazýváme blok deklarací.
Hodnotu deklarace, můžeme ještě navýšit použitím příkazu !important, který zabraňuje jejím dalším úpravám. Použití příkazu bychom ovšem měli zvážit, například AMP weby ho z důvodu optimalizace kódu vůbec neumožňují. U syntaxe je vhodné zmínit i komentáře, které v tomto případě uzavíráme do lomítek a hvězd: /**/.
Stejným způsobem můžeme pracovat také s třídami. Třídy usnadňují opakované použití stejného stylování na různé části obsahu. Pokud tak například máme ve většině obsahu použitou černou barvu fontu, ale potřebujeme také několik odstavců napsat zeleně, můžeme si pro tento úkon vytvořit třídu, kterou následně přiřadíme potřebným textům. Třídu zapisujeme s tečkou na začátku: .trida{atribut:hodnota;}.
Jak na layout v CSS
Návrh layoutu neboli rozložení internetových stránek patří mezi první kroky návrhu designu webu i jeho tvorby. V rámci kaskádových stylů se v tomto kontextu setkáváme s pojmem kontejner (container). Kontejnery, typicky <div>, jsou logické části kódu, uvnitř kterých definujeme jednotlivé části stránky, například hlavičku, obsah nebo sloupec. Každá z těchto částí představuje jeden kontejner, u něhož specifikujeme vzhled pro všechny jeho elementy.
K návrhu layoutu můžeme přistoupit dvěma způsobit. Starší z nich je takzvaný Flexbox. Je prioritně určený pro tvorbu jednosměrného layoutu webu a hodí se spíše pro stylování komponent uvnitř stránek, například navigace či formuláře.
K tvorbě komplexnějších a celostránkových layoutů pak používáme spíše CSS Grid. Mřížku, kterou je možné definovat v řádcích i ve sloupcích čili využít i pro vícesměrné rozložení. Principálně se jedná o vylepšenou variantu klasických HTML tabulek, nabídne ovšem mnohem více možností. Pokud právě uvažujete o tvorbě webu nebo redesignu toho stávajícího, neváhejte využít naší bezplatné konzultace, rádi vám pomůžeme s návrhem i komplexní realizací.
Máte nápad na nový projekt?
Popište nám ho! Rádi odpovíme na všechny vaše dotazy, nebo rovnou domluvíme termín schůzky.
Ozvěte se Vítovi! Vše s vámi projedná a probere.
Vít Uličný
Zakladatel & CEO