CSS

Rozbalit box

Obsah boxu

Cascading Style Sheets (zkratka CSS, česky kaskádové styly) je deklarativní stylovací jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných v HTML, XHTML, XML nebo jiných značkovacích jazycích. Společně s HTML a JavaScriptem tvoří základní trojici technologií pro tvorbu webových stránek a aplikací. Zatímco HTML definuje strukturu a sémantiku obsahu (nadpisy, odstavce, obrázky), CSS určuje, jak se tyto prvky zobrazí – jejich barvu, velikost, písmo, rozložení na stránce a mnoho dalších vizuálních vlastností.

Hlavní myšlenkou CSS je oddělení obsahu od jeho vizuální prezentace. Toto oddělení přináší řadu výhod, včetně snadnější údržby kódu, lepší přístupnosti, větší flexibility a možnosti definovat různý vzhled pro různá zařízení (např. pro monitory, tiskárny nebo mobilní telefony) pomocí jediného zdrojového HTML dokumentu. Standardy CSS jsou vyvíjeny a spravovány organizací World Wide Web Consortium (W3C).

📜 Historie

Vývoj CSS byl reakcí na problémy raného webu, kde byl vzhled stránek definován přímo v HTML pomocí značek jako `` nebo atributů jako `bgcolor`. Tento přístup vedl k nepřehlednému kódu, obtížné údržbě a zbytečně velkým souborům.

🏛️ Počátky a CSS 1

První návrh na stylovací jazyk pro web představil Håkon Wium Lie v roce 1994. Společně s Bertem Bosem vytvořili základ toho, co se později stalo CSS. První oficiální doporučení, CSS Level 1 (CSS1), bylo vydáno organizací W3C v prosinci 1996. Tato verze definovala základní vlastnosti pro formátování textu, barev, okrajů a pozicování. Podpora v tehdejších prohlížečích, jako byl Netscape Navigator a Internet Explorer, však byla velmi nekonzistentní a plná chyb.

🌐 CSS 2 a éra "válek prohlížečů"

V květnu 1998 bylo vydáno doporučení CSS Level 2 (CSS2), které přineslo řadu vylepšení, včetně absolutního, relativního a fixního pozicování, konceptu media types (pro tisk, obrazovky atd.) a pokročilejších selektorů. Kvůli nejasnostem ve specifikaci a pokračujícím "válkám prohlížečů" byla implementace stále problematická. Proto byla v roce 2011 vydána revidovaná verze CSS 2.1, která opravila chyby, vyjasnila sporné části a stala se stabilním základem, na kterém moderní web funguje.

🧩 Modulární přístup CSS3

Na rozdíl od předchozích verzí není CSS3 jedinou monolitickou specifikací. Místo toho je rozdělena do samostatných modulů, které mohou být vyvíjeny a finalizovány nezávisle na sobě. Tento přístup umožnil mnohem rychlejší inovace. Mezi nejdůležitější moduly CSS3 patří:

• **Selectors Level 3**: Pokročilé selektory pro přesnější cílení na prvky.
• **Colors**: Podpora pro RGBA, HSL a průhlednost.
• **Backgrounds and Borders**: Možnost použití více obrázků na pozadí, zaoblené rohy (`border-radius`) a stíny (`box-shadow`).
• **2D/3D Transformations**: Funkce pro otáčení, škálování a posouvání prvků.
• **Transitions**: Plynulé animace změn vlastností.
• **Animations**: Komplexní, klíčovými snímky řízené animace.
• **Flexible Box Layout (Flexbox)**: Modul pro efektivní jednorozměrné rozvržení prvků.
• **Grid Layout**: Modul pro komplexní dvourozměrné rozvržení stránek.

🚀 Moderní CSS (Level 4 a dále)

Termín "CSS4" se oficiálně nepoužívá. Místo toho se mluví o nových úrovních jednotlivých modulů (např. Selectors Level 4). Moderní CSS přináší revoluční funkce, jako jsou:

• **Vlastní vlastnosti (CSS Custom Properties)**, známé jako CSS proměnné, které umožňují dynamické změny stylů.
• **Container Queries**: Možnost stylovat prvky na základě velikosti jejich rodičovského kontejneru, nikoli jen celé stránky.
• **Cascade Layers (`@layer`)**: Nástroj pro lepší kontrolu nad specifičností a pořadím stylů ve velkých projektech.
• Rozšířené barevné prostory jako P3 nebo Rec. 2020.

⚙️ Princip fungování

CSS funguje na základě sady pravidel. Každé pravidlo se skládá ze selektoru a bloku deklarací.

Syntaxe

Základní syntaxe CSS pravidla vypadá následovně: ```css selektor {

 vlastnost: hodnota;
 dalsi-vlastnost: jina-hodnota;

} ```

• Selektor určuje, na který HTML prvek (nebo prvky) se bude pravidlo aplikovat.
• Blok deklarací je uzavřen ve složených závorkách `{}`.
• Deklarace se skládá z vlastnosti (např. `color`, `font-size`) a její hodnoty (např. `red`, `16px`), oddělených dvojtečkou. Jednotlivé deklarace jsou odděleny středníkem.

Příklad: Následující pravidlo nastaví všem odstavcům (`

`) na stránce modrou barvu textu a velikost písma 16 pixelů. ```css p { color: blue; font-size: 16px; } ```

Selektory

Selektory jsou klíčovou součástí CSS, protože umožňují přesně cílit na prvky, které chceme stylovat.

• **Typové selektory**: Cílí na všechny prvky daného typu (např. `h1`, `div`, `p`).
• **Třídní selektory (Class)**: Cílí na prvky s daným atributem `class` (např. `.upozorneni`). Jeden prvek může mít více tříd.
• **ID selektory**: Cílí na prvek s unikátním atributem `id` (např. `#hlavni-menu`). ID by mělo být na stránce jedinečné.
• **Atributové selektory**: Cílí na prvky na základě jejich atributů a hodnot (např. `input[type="text"]`).
• **Pseudotřídy**: Cílí na prvky v určitém stavu (např. `:hover` při najetí myší, `:first-child` pro první dítě).
• **Pseudoelementy**: Umožňují stylovat části prvku, které nejsou definovány v HTML (např. `::before` pro vložení obsahu před prvek, `::first-letter` pro první písmeno).

Kaskáda, specifičnost a dědičnost

Název "kaskádové styly" odkazuje na mechanismus, kterým prohlížeč rozhoduje, které stylové pravidlo se aplikuje, pokud na jeden prvek cílí více pravidel.

1. Pořadí a původ (Cascade): Styly mohou pocházet z různých zdrojů – od autora stránky, od uživatele (v nastavení prohlížeče) nebo z výchozího nastavení prohlížeče. Pravidla autora mají obecně přednost před pravidly uživatele a ta zase před výchozími. Pokud jsou pravidla ze stejného zdroje, poslední definované pravidlo vyhrává. 2. Specifičnost (Specificity): Každý selektor má svou "váhu" neboli specifičnost. Čím je selektor specifičtější, tím vyšší má prioritu. Obecně platí: ID selektor (`#id`) je silnější než třídní selektor (`.class`), který je silnější než typový selektor (`p`). 3. Důležitost (`!important`): Přidáním `!important` k deklaraci lze přebít jakékoli jiné pravidlo, bez ohledu na jeho specifičnost nebo pořadí. Jeho používání by mělo být omezeno na specifické případy, protože narušuje přirozenou kaskádu. 4. Dědičnost (Inheritance): Některé CSS vlastnosti (např. `color`, `font-family`, `text-align`) se automaticky přenášejí z rodičovského prvku na jeho potomky. Například pokud nastavíte barvu textu na prvku `<body>`, všechny odstavce a nadpisy uvnitř zdědí tuto barvu, pokud nemají definovanou vlastní.

Box Model

Každý prvek na webové stránce je v CSS chápán jako obdélníkový box. Tento tzv. box model se skládá ze čtyř částí:

• Content: Vlastní obsah prvku (text, obrázek).
• Padding: Vnitřní okraj, prostor mezi obsahem a rámečkem.
• Border: Rámeček, který obklopuje padding a obsah.
• Margin: Vnější okraj, prostor mezi rámečkem a okolními prvky.

Standardně se šířka a výška prvku (`width`, `height`) vztahují pouze na oblast obsahu. Pomocí vlastnosti `box-sizing: border-box;` lze toto chování změnit tak, aby `width` a `height` zahrnovaly i padding a border, což často zjednodušuje tvorbu rozvržení.

🛠️ Metodologie a preprocesory

S rostoucí složitostí webových projektů vznikla potřeba organizovat CSS kód systematicky.

Metodologie

Metodologie jsou soubory pravidel a doporučení, jak psát udržitelný a škálovatelný CSS kód.

• BEM (Block, Element, Modifier): Velmi populární metodologie, která pojmenovává třídy podle struktury `blok__element--modifikator` (např. `.card__title--highlighted`). Zabraňuje konfliktům a zpřehledňuje strukturu komponent.
• OOCSS (Object-Oriented CSS): Zaměřuje se na oddělení struktury od vzhledu a kontejneru od obsahu, čímž podporuje znovupoužitelnost stylů.
• SMACSS (Scalable and Modular Architecture for CSS): Dělí styly do kategorií (Base, Layout, Module, State, Theme) pro lepší organizaci.

Preprocesory

CSS preprocesory jsou nástroje, které rozšiřují syntaxi CSS o programátorské konstrukce. Kód napsaný v preprocesoru se před použitím na webu "přeloží" (zkompiluje) do standardního CSS.

• Sass (Syntactically Awesome Style Sheets): Nejrozšířenější preprocesor. Umožňuje používat proměnné, vnořená pravidla, mixiny (funkce pro opakované použití bloků stylů) a mnoho dalšího.
• Less (Leaner Style Sheets): Podobný jako Sass, byl populární zejména v ekosystému frameworku Bootstrap.
• Stylus: Nabízí velmi flexibilní syntaxi, která umožňuje vynechat složené závorky, dvojtečky i středníky.

💡 Pro laiky

Představte si webovou stránku jako stavbu domu.

• HTML je hrubá stavba: Jsou to základy, nosné zdi, střecha, příčky a otvory pro okna a dveře. HTML říká: "Tady bude obývací pokoj, tady kuchyň, toto je nadpis a toto je odstavec textu." Definuje tedy strukturu a smysl jednotlivých částí.
• CSS jsou interiérový designér a fasáda: CSS vezme tuto hrubou stavbu a určí, jak bude vypadat. Říká: "Zdi v obýváku budou světle modré, podlaha bude dřevěná, písmo nadpisů bude velké a tučné a okna budou mít červené rámy." CSS tedy definuje veškerý vzhled – barvy, materiály, rozestupy, velikosti a celkovou atmosféru.

Díky oddělení HTML a CSS můžete kompletně změnit vzhled "domu" (např. z letního sídla na zimní chatu), aniž byste museli pohnout jedinou "zdí" (měnit HTML kód). Stačí jen vyměnit "designový plán" (CSS soubor).

⚖️ Výhody a nevýhody

Výhody

• **Oddělení struktury a vzhledu**: Zvyšuje přehlednost a usnadňuje údržbu kódu.
• **Znovupoužitelnost**: Styly definované v jednom souboru lze aplikovat na stovky stránek.
• **Konzistence**: Zajišťuje jednotný vzhled napříč celým webem.
• **Přístupnost**: Správně strukturovaný dokument bez vizuálních značek je lépe čitelný pro asistenční technologie (např. čtečky obrazovky).
• **Responzivní design**: Umožňuje snadno přizpůsobit vzhled pro různá zařízení (mobily, tablety, desktopy).
• **Pokročilé možnosti designu**: Moderní CSS umožňuje komplexní rozvržení, animace a vizuální efekty, které byly dříve možné jen s obrázky nebo JavaScriptem.

Nevýhody

• **Složitost pro začátečníky**: Pochopení kaskády, specifičnosti a dědičnosti může být náročné.
• **Kompatibilita prohlížečů**: Ačkoliv se situace výrazně zlepšila, stále existují drobné rozdíly v implementaci nových vlastností mezi prohlížeči.
• **Globální rozsah**: Všechny styly standardně platí pro celou stránku, což může ve velkých aplikacích vést ke konfliktům a nechtěnému přepisování stylů. Tento problém řeší metodologie jako BEM nebo moderní JavaScript frameworky.
• **Není to programovací jazyk**: CSS je deklarativní jazyk, chybí mu logické konstrukce jako podmínky nebo cykly (tyto funkce dodávají preprocesory).

Šablona:Aktualizováno