CSS - Historie editací

Filmedy: Nahrazení textu „\\([^ ][^])\\“ textem „'''$1'''“

2026-01-05T01:20:00Z

Nahrazení textu „\*\*([^ ][^*]*)\*\*“ textem „'''$1'''“

InfopediaBot: Bot: AI generace (gemini-2.5-pro + Cache)

2025-12-18T06:21:25Z

Bot: AI generace (gemini-2.5-pro + Cache)

Nová stránka

{{K rozšíření}}
{{Infobox programovací jazyk
| název = Cascading Style Sheets (CSS)
| logo = [[Soubor:CSS3 logo and wordmark.svg|180px]]
| přípona souboru = .css
| paradigma = Deklarativní, založené na pravidlech
| první verze = 17. prosince 1996 (CSS 1)
| vydavatel = [[World Wide Web Consortium]] (W3C)
| autor = [[Håkon Wium Lie]], [[Bert Bos]]
| ovlivněn = [[DSSSL]], [[XSL-FO]]
| ovlivnil = Prakticky všechny moderní webové technologie
| standardy = W3C Recommendations
}}

'''Cascading Style Sheets''' (zkratka '''CSS''', česky '''kaskádové styly''') je [[deklarativní jazyk|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 [[JavaScript|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 `<font>` 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 [[Bert Bos|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 (`<p>`) 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 [[JavaScript|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).

{{DEFAULTSORT:Css}}
{{Aktualizováno|datum=18.12.2025}}
[[Kategorie:Webdesign]]
[[Kategorie:Standardy W3C]]
[[Kategorie:Stylovací jazyky]]
[[Kategorie:Internetové technologie]]
[[Kategorie:Vytvořeno Gemini 2.5 Pro]]

← Starší verze		Verze z 5. 1. 2026, 03:20
Řádek 28:		Řádek 28:
	=== 🧩 Modulární přístup CSS3 ===		=== 🧩 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ří:		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.		* '''Selectors Level 3''': Pokročilé selektory pro přesnější cílení na prvky.
	* Colors: Podpora pro [[RGBA]], [[HSL]] a průhlednost.		* '''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`).		* '''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ů.		* '''2D/3D Transformations''': Funkce pro otáčení, škálování a posouvání prvků.
	* Transitions: Plynulé animace změn vlastností.		* '''Transitions''': Plynulé animace změn vlastností.
	* Animations: Komplexní, klíčovými snímky řízené animace.		* '''Animations''': Komplexní, klíčovými snímky řízené animace.
	* Flexible Box Layout (Flexbox): Modul pro efektivní jednorozměrné rozvržení prvků.		* '''Flexible Box Layout (Flexbox)''': Modul pro efektivní jednorozměrné rozvržení prvků.
	* Grid Layout: Modul pro komplexní dvourozměrné rozvržení stránek.		* '''Grid Layout''': Modul pro komplexní dvourozměrné rozvržení stránek.

	=== 🚀 Moderní CSS (Level 4 a dále) ===		=== 🚀 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:		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ů.		* '''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.		* '''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.		* '''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]].		* Rozšířené barevné prostory jako [[P3]] nebo [[Rec. 2020]].

Řádek 69:		Řádek 69:
	=== Selektory ===		=== Selektory ===
	Selektory jsou klíčovou součástí CSS, protože umožňují přesně cílit na prvky, které chceme stylovat.		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`).		* '''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.		* '''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é.		* '''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"]`).		* '''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ě).		* '''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).		* '''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 ===		=== Kaskáda, specifičnost a dědičnost ===
Řádek 117:		Řádek 117:
	== ⚖️ Výhody a nevýhody ==		== ⚖️ Výhody a nevýhody ==
	=== Výhody ===		=== Výhody ===
	* Oddělení struktury a vzhledu: Zvyšuje přehlednost a usnadňuje údržbu kódu.		* '''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.		* '''Znovupoužitelnost''': Styly definované v jednom souboru lze aplikovat na stovky stránek.
	* Konzistence: Zajišťuje jednotný vzhled napříč celým webem.		* '''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).		* '''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).		* '''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 [[JavaScript\|JavaScriptem]].		* '''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 [[JavaScript\|JavaScriptem]].

	=== Nevýhody ===		=== 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é.		* '''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.		* '''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.		* '''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).		* '''Není to programovací jazyk''': CSS je deklarativní jazyk, chybí mu logické konstrukce jako podmínky nebo cykly (tyto funkce dodávají preprocesory).

	{{DEFAULTSORT:Css}}		{{DEFAULTSORT:Css}}

CSS - Historie editací

Filmedy: Nahrazení textu „\*\*([^ ][^*]*)\*\*“ textem „'''$1'''“

InfopediaBot: Bot: AI generace (gemini-2.5-pro + Cache)

Filmedy: Nahrazení textu „\\([^ ][^])\\“ textem „'''$1'''“