Přejít na obsah
Slovník pojmů

CSS

CSS (Cascading Style Sheets, kaskádové styly) je jazyk, kterým se určuje vzhled webové stránky: barvy, písma, rozestupy, rozvržení a chování na různě velkých obrazovkách. HTML určuje, co na stránce je, CSS určuje, jak to vypadá.

Jak CSS funguje

CSS se skládá z pravidel. Každé pravidlo má selektor (na které prvky se vztahuje) a deklarace (co se má změnit). Například pravidlo h1 { color: navy; font-size: 2rem; } obarví všechny hlavní nadpisy tmavě modře a zvětší je. Styly se zapisují do samostatného souboru .css, který stránka načítá, nebo přímo do HTML. Samostatný soubor je přehlednější a prohlížeč si ho uloží do mezipaměti.

Co znamená kaskáda

Na jeden prvek může platit více pravidel. Prohlížeč o výsledku rozhoduje podle tří kritérií: důležitosti, specifičnosti selektoru a pořadí. Konkrétnější selektor (třída nebo identifikátor) přebíjí obecnější (název značky) a při shodě vyhrává pravidlo zapsané později. Proto se úprava vzhledu WordPress šablony dělá v podřízené šabloně (child theme), jejíž styly se načítají po původních.

Rozvržení: flexbox a grid

Moderní CSS má dva nástroje pro rozvržení stránky: • Flexbox — skládá prvky do jedné řady nebo sloupce a rozděluje mezi ně volné místo. Hodí se pro menu, tlačítka nebo karty v řádku. • Grid — dvourozměrná mřížka s řádky i sloupci. Hodí se pro rozvržení celé stránky nebo galerie. Oba nahradily dřívější postupy s plovoucími prvky a tabulkami.

Responzivní design a media queries

Media queries umožňují použít jiné styly podle šířky obrazovky. Na mobilu se tak tři sloupce složí pod sebe, menu se schová do ikony a písmo se zmenší. Většina webů dnes vzniká přístupem mobile first: základní styly jsou pro mobil a pro větší obrazovky se postupně rozšiřují.

CSS a rychlost webu

Prohlížeč nezačne stránku vykreslovat, dokud nenačte CSS v hlavičce. Velké a nepoužívané styly proto zpomalují první zobrazení a zhoršují metriky Core Web Vitals. Pomáhá minifikace, odstranění nepoužitých pravidel a vložení nejdůležitějších stylů pro horní část stránky přímo do HTML (critical CSS).

Je váš web pomalý nebo se rozpadá na mobilu?

Zrychlíme načítání, uklidíme styly šablony a zajistíme, že web vypadá dobře na každém zařízení.

Rychlost a výkon webuRedesign webu

Související pojmy

FontHTMLJavaScriptWordPressCMS

Časté dotazy

Nejčastější otázky o CSS

Ne. CSS je stylový jazyk: popisuje vzhled, ale neobsahuje logiku jako podmínky nebo cykly v běžném smyslu. Pro logiku na stránce slouží JavaScript.

HTML určuje strukturu a obsah stránky (nadpisy, odstavce, obrázky). CSS určuje jejich vzhled (barvy, písma, rozvržení).

Menší úpravy v sekci Vzhled › Přizpůsobit › Dodatečné CSS. Rozsáhlejší změny patří do podřízené šablony (child theme), aby je nepřepsala aktualizace.

Hotová sada stylů a tříd, například Tailwind CSS nebo Bootstrap, která urychluje tvorbu webu a sjednocuje vzhled komponent.

Potřebujete pomoc s vaším webem?

Nezávazná konzultace zdarma. Ukážeme vám, jak AI zlepší váš web.

Kontaktujte nás

Používáme pouze nezbytné cookies, dokud si nevyberete více. Zásady používání cookies