Cascading Style Sheets (CSS) je jazyk, který se používá k definování vzhledu a formátování dokumentů napsaných v jazyce HTML nebo XML. CSS umožňuje webovým vývojářům oddělit obsah Webové stránky (psaný v HTML) od jeho designu. Díky tomu můžete změnit vzhled celého webu pouhým upravením jediného souboru, což usnadňuje údržbu a zvyšuje efektivitu práce na projektech.
Základy CSS
CSS pravidla se skládají z selektorů a deklaračních bloků. Selektor určuje, na který HTML element se pravidlo vztahuje, a deklarační blok definuje, jak by tento element měl být stylizován. Deklarační blok obsahuje jednu nebo více deklarací oddělených středníkem, a každá deklarace obsahuje název vlastnosti a její hodnotu oddělené dvojtečkou.
Příklad CSS pravidla:
p {
color: red;
font-size: 16px;
}
Způsoby vkládání CSS do webové stránky
Existují tři základní způsoby, jak přidat CSS do webových stránek:
- Inline styl: CSS pravidla jsou přímo vložena do HTML elementů pomocí atributu
style.
- Vnitřní styl: CSS pravidla jsou umístěna v rámci
<style> tagu v hlavičce dokumentu (<head>).
- Externí styl: CSS pravidla jsou umístěna v externím souboru, který je připojen k dokumentu pomocí
<link> tagu v hlavičce dokumentu.
Selektory a vlastnosti
CSS nabízí širokou škálu selektorů pro cílení na různé HTML elementy, včetně jednoduchých selektorů (např. tag, třída, id) a složitějších selektorů (např. potomkové selektory, pseudotřídy a pseudoelementy).
Vlastnosti CSS umožňují nastavit různé aspekty vzhledu elementu, jako je barva, velikost písma, odsazení, okraje, pozadí a mnoho dalších.
Zásady dobré praxe
- Modularita: Rozdělte váš CSS kód do logických částí a používejte externí styl listy pro lepší organizaci a údržbu.
- Pojmenování tříd: Používejte konzistentní a srozumitelné názvy pro třídy a id, aby byl váš kód snadněji čitelný.
- Mobile-first přístup: Začněte s designem pro mobilní zařízení a postupně přidávejte styly pro větší obrazovky pomocí mediálních dotazů.
- Optimalizace a výkon: Minimalizujte velikost CSS souborů, využijte CSS minifikace a uvažujte o použití CSS proměnných pro efektivnější správu designových systémů.
CSS je zásadní nástroj pro každého webového vývojáře, který chce vytvářet atraktivní, responzivní a přístupné webové stránky. Jeho pochopení a správné použití může výrazně zlepšit uživatelskou zkušenost a celkovou kvalitu webových projektů.
