Zkratka proCascading Style SheetsTakéCascading Style Sheets, stylyZákladní
Definice
CSS je jazyk pro popis vzhledu webových dokumentů, zejména HTML stránek. Určuje barvy, typografii, rozestupy, rozvržení, animace i přizpůsobení různým obrazovkám. Díky kaskádě kombinuje pravidla z více zdrojů a podle přesně daných priorit rozhoduje, které vlastnosti se na prvek použijí.
Nezaměňujte: Zkratka CSS může mimo web znamenat i Content Scramble System u DVD, v tomto hesle jde o Cascading Style Sheets pro webové stránky.
Co CSS přidává k HTML
CSS popisuje prezentaci dokumentu: barvy, písma, mezery, okraje, animace a rozvržení. HTML drží význam a strukturu obsahu, zatímco CSS říká prohlížeči, jak mají vybrané prvky vypadat na konkrétním médiu. Prohlížeč spojí HTML, CSS a výsledný DOM, potom z nich vytvoří vykreslenou stránku.
Oddělení obsahu od vzhledu dovoluje měnit design bez přepisování textů a komponent. Stejný dokument může mít jiné styly pro mobil, tisk nebo tmavý režim. CSS není programovací jazyk v klasickém smyslu, ale deklarativní sada pravidel: vývojář popíše cílový stav a prohlížeč vypočítá výsledek.
Kaskáda: proč jedno pravidlo přebije druhé
Kaskáda je pravidlo rozhodování, které určí konečnou hodnotu vlastnosti, když na stejný prvek míří více deklarací. Do výsledku vstupuje původ stylu, důležitost, specifičnost selektoru, pořadí pravidel a dědičnost. Právě kaskáda umožňuje mít základní styl celé aplikace, lokální úpravu komponenty i nouzové přepsání.
button { color: black; }
.primary { color: white; }
button.primary { color: blue; }Prvek <button class="primary"> skončí s modrým textem, protože selektor button.primary je konkrétnější než samotný element nebo samotná třída. Většina zmatků v CSS nevzniká z vlastnosti color, ale z otázky, které pravidlo skutečně vyhrálo.
Selektory, box model a rozvržení stránky
Selektory vybírají prvky
Selektor určuje množinu prvků, na kterou se pravidlo použije. Praktický CSS kód obvykle stojí na třídách, pseudo-třídách jako :hover a strukturálních vztazích mezi prvky. Příliš složité selektory zvyšují křehkost, protože drobná změna HTML může změnit vzhled nečekaně velké části stránky.
Box model počítá prostor
Box model bere každý prvek jako obdélník složený z obsahu, vnitřního odsazení, rámečku a vnějšího okraje. Nastavení box-sizing: border-box často zjednodušuje mentální model, protože šířka zahrne i padding a border. Bez pochopení box modelu se těžko ladí přetékání, mezery a zarovnání.
Flexbox a Grid skládají layout
Flexbox se hodí pro rozdělení prostoru v jednom směru, například řadu položek v navigaci. CSS Grid řeší dvourozměrné uspořádání s řádky a sloupci. Společně s media queries tvoří základ responzivního designu, protože layout může reagovat na šířku okna, možnosti zařízení nebo uživatelské preference.
CSS v produkčním webu
Produkční CSS ovlivňuje rychlost načtení, stabilitu rozvržení i přístupnost. Velké soubory mohou zdržet první vykreslení, špatně zvolený kontrast zhorší čitelnost a animace bez respektu k omezení pohybu mohou vadit části uživatelů. Moderní projekty proto používají proměnné, komponentový přístup, lintování a pravidla pojmenování.
CSS se také vyvíjí. Prohlížeče postupně přidávají nové selektory, container queries, vrstvy kaskády a lepší práci s barvami. Bezpečný návrh počítá s podporou cílových prohlížečů, testuje reálná zařízení a nechává starším prohlížečům přijatelný, i když jednodušší vzhled.
Příklady z praxe
Odkaz přeměněný na tlačítko
E-shop má v HTML běžný odkaz na detail akce, ale designér chce, aby vypadal jako výrazné tlačítko. CSS třídě přiřadí pozadí, odsazení, zaoblení a kontrastní text. Výsledkem je prvek, který zůstává odkazem pro prohlížeč i asistivní technologie, ale vizuálně působí jako hlavní výzva k akci.
.cta { display: inline-block; padding: 0.75rem 1rem; border-radius: 0.5rem; background: #1457d9; color: white; font-weight: 700; }Responzivní seznam karet
Katalog produktů potřebuje jednu kolonu na úzkém telefonu a více karet vedle sebe na širším monitoru. CSS Grid s funkcí auto-fit rozdělí dostupnou šířku bez ručního počítání breakpointů. Rozvržení se přizpůsobí počtu karet i velikosti okna, takže stejný HTML seznam funguje v různých zařízeních.
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
Časté omyly
- MýtusCSS je jen na barvy a fonty.
- Ve skutečnostiCSS řeší i rozvržení, responzivitu, animace, tiskové styly, přizpůsobení uživatelským preferencím a část vizuální stability stránky. U moderního webu je CSS klíčová vrstva mezi strukturou obsahu a skutečným uživatelským zážitkem.
- MýtusKdyž pravidlo nefunguje, stačí přidat !important.
- Ve skutečnostiDeklarace !important může krátkodobě přebít jiné pravidlo, ale často vytvoří horší problém pro další úpravy. Lepší je zjistit původ konfliktu: specifičnost selektoru, pořadí načtení, dědičnost nebo pravidla z komponenty či frameworku.
- MýtusCSS je jednodušší než programování, takže nepotřebuje architekturu.
- Ve skutečnostiVelké CSS bez struktury rychle trpí duplicitami, nečekanými přepisy a obtížným mazáním starých pravidel. U větších projektů pomáhá design system, komponentové styly, jasné pojmenování a kontrola velikosti výsledného balíčku.
Časté dotazy
- Proč se změna v CSS na stránce neukáže?
- Změna v CSS se nemusí projevit kvůli cache prohlížeče, cache CDN, chybějícímu nasazení nového souboru nebo kvůli tomu, že jiné pravidlo má vyšší prioritu. CSS je také často zpracované build nástrojem, takže úprava zdrojového souboru nestačí, pokud se nevygeneruje finální balíček. Ladění obvykle začíná v DevTools, kde je vidět, které pravidlo bylo použito a které bylo přepsáno.
- Má se CSS psát ručně, nebo přes framework?
- CSS framework dává smysl, když tým potřebuje rychle skládat konzistentní rozhraní a nechce od začátku navrhovat všechny mezery, barvy a komponenty. Ručně psané CSS bývá vhodnější pro menší weby, unikátní vizuální styl nebo projekty s přísnou kontrolou výsledného kódu. Praktická volba závisí na velikosti týmu, životnosti projektu a tom, zda framework opravdu zrychluje práci, nebo jen přidává vrstvu navíc.
- Kdy má u CSS smysl preprocesor?
- CSS preprocesor, například Sass, pomáhá hlavně u starších nebo rozsáhlých codebase, kde se hodí skládání souborů, mixiny a pohodlnější zápis složitých pravidel. Moderní CSS už ale obsahuje proměnné, nesting se postupně dostává do prohlížečů a build krok není vždy nutný. Preprocesor je tedy nástroj pro konkrétní potřebu, ne povinná součást každého webu.
- Proč se CSS nechová ve všech prohlížečích stejně?
- CSS vlastnosti se v prohlížečích mohou lišit kvůli rozdílné úrovni podpory, experimentálním implementacím, chybám v renderovacích jádrech nebo nejasným okrajovým případům specifikace. Profesionální vývoj proto ověřuje cílové prohlížeče, používá testování na reálných zařízeních a počítá s postupným vylepšováním. Stránka by měla zůstat použitelná i tehdy, když novější dekorativní vlastnost chybí.
Zdroje
- Cascading Style Sheets(otevře se v novém okně)
- CSS: Cascading Style Sheets(otevře se v novém okně)
- Selectors Level 4(otevře se v novém okně)
- CSS Cascading and Inheritance Level 5(otevře se v novém okně)
Související pojmy
