CSS určuje, jak váš web vypadá. Barvy, písma, mezery, rozvržení: všechno je to CSS. Zjistěte, co to je, jak to funguje a proč to pro vaši značku záleží.
Navštívili jste někdy dva weby s téměř stejným obsahem, které vypadaly úplně jinak? Jeden je vypiplaný, čistý a dobře se čte. Druhý působí přeplněně, zastarale a špatně se v něm orientuje. Obsah může být stejný. To, co dělá ten rozdíl, je CSS.
V předchozí kapitole jste se dozvěděli, že HTML dává webové stránce strukturu. Říká prohlížeči, čím vše je: nadpis, odstavec, obrázek, tlačítko. Samotné HTML ale nemá žádný styl. Bez CSS by každý web vypadal jako prostý textový dokument. CSS mění tuto strukturu na vizuální zážitek.
Co je CSS?
CSS znamená Cascading Style Sheets (kaskádové styly). Je to jazyk, který ovládá vizuální podobu webové stránky. Zatímco HTML říká „toto je nadpis“, CSS říká „tento nadpis má být tmavě modrý, vysoký 32 pixelů a použít toto konkrétní písmo“. Zatímco HTML říká „toto je tlačítko“, CSS říká „toto tlačítko má být zelené, mít zaoblené rohy a být 20 pixelů od textu nad ním“.
Každé vizuální rozhodnutí, které na webu vidíte, barvy, písma, velikosti, mezery, rozvržení, efekty při najetí myší, pozadí, pochází z CSS. Je to designová vrstva webu.
Jak CSS funguje?
CSS funguje tak, že cílí na prvky HTML a uplatňuje na ně pravidla stylu. Řeknete CSS, který prvek stylovat, a pak popíšete, jak má vypadat. Tato pravidla se píšou do samostatného souboru, který prohlížeč načítá spolu s HTML. Když prohlížeč přečte oba soubory dohromady, uplatní styly na odpovídající prvky a zobrazí hotovou stránku.
Část názvu „kaskádové“ označuje, jak CSS řeší konflikty. Pokud se na stejný prvek vztahuje více pravidel stylu, CSS se řídí určitým pořadím priority, aby rozhodlo, které pravidlo vyhraje. Konkrétnější pravidla přebíjejí obecnější. Tento systém dává designérům přesnou kontrolu nad tím, jak každý prvek vypadá na celém webu.
Typy CSS
CSS lze psát třemi různými způsoby. Každý funguje, ale ne všechny se hodí pro každou situaci stejně.
1. Inline CSS
Inline CSS se píše přímo na jednom prvku HTML. Ovlivňuje jen tento jeden prvek a přebíjí všechny ostatní styly, které se na něj vztahují. Hodí se pro rychlé jednorázové změny, ale ve větším měřítku se stává problémem. Pokud chcete změnit barvu použitou u 50 prvků, musíte ji změnit na 50 místech místo na jednom.
2. Interní CSS
Interní CSS se píše do značky style přímo v souboru HTML, obvykle v horní části stránky. Platí jen pro tuto stránku. Pro jednotlivé stránky nebo malé projekty je to v pořádku, ale u celého webu to znamená opakovat stejné styly na každé stránce. Změníte jednu věc a musíte upravit každý soubor zvlášť.
3. Externí CSS
Externí CSS je v samostatném souboru, který je propojený s vašimi stránkami HTML. Je to standardní přístup pro každý skutečný web. Všechny styly definujete jednou v jednom souboru a každá stránka, která na něj odkazuje, je zdědí. Změníte barvu nebo písmo na jednom místě a okamžitě se změní všude. Je to čistší, rychlejší na načtení a mnohem snazší na údržbu. Téměř každý dobře postavený web používá externí CSS jako základ.
Co CSS na vašem webu ovládá
CSS se dotýká téměř každého vizuálního aspektu vašeho webu. Tady jsou hlavní oblasti, které řeší.
Barvy a pozadí
Každá barva na vašem webu, barva textu, pozadí, tlačítek, okrajů, se nastavuje přes CSS. Barvy vaší značky se na webu uplatňují jednotně tak, že je jednou nadefinujete v CSS a použijete všude.
Typografie
Písmo, které váš web používá, velikost nadpisů a hlavního textu, mezery mezi řádky, zda je text tučný nebo kurzíva: to všechno je CSS. Dobrá typografie usnadňuje čtení obsahu a posiluje identitu vaší značky.
Rozvržení a mezery
Jak jsou uspořádané sloupce, kolik místa je mezi sekcemi, jak široká je oblast obsahu, kde se zobrazí postranní panel: CSS ovládá všechno. Pravidla rozvržení určují celkovou strukturu každé stránky nad rámec toho, co poskytuje HTML.
Responzivní chování
CSS také umožňuje, aby fungoval responzivní design. Media queries v CSS říkají prohlížeči, aby uplatnil jiné styly podle velikosti obrazovky. Na počítači se může obsah zobrazit ve třech sloupcích. Na telefonu CSS tyto sloupce upraví tak, aby se skládaly pod sebe a všechno se vešlo na menší obrazovku.
Animace a efekty
Efekty při najetí na tlačítka, plynulé přechody mezi sekcemi, postupné zobrazování obsahu při rolování: to je všechno CSS. Přidává zážitku pohyb a dotažení bez nutnosti JavaScriptu.
Co to znamená pro váš web jako majitele značky
CSS psát nemusíte, abyste měli dobře navržený web. Tvůrci webů to zajistí za vás. Když vyberete šablonu, zvolíte barvy značky a nastavíte písma, platforma tyto volby na pozadí převede na pravidla CSS. Každá změna ve vizuálním editoru vytvoří CSS, které prohlížeč přečte a uplatní.
Pro vás je důležité, aby CSS, které vaše platforma vytváří, bylo čisté a efektivní. Těžké nebo nafouknuté CSS zpomaluje načítání stránek. Dobře napsané CSS udržuje váš web rychlý a jednotný na každé stránce. Tvůrce webů WEMASY vytváří optimalizované CSS automaticky, takže se vaše designové volby uplatní čistě a nepřidávají stránkám zbytečnou váhu. Jak to souvisí s výkonem, se dočtete v článku co je rychlost webu a proč na ní záleží.
Často kladené otázky
Musím se učit CSS, abych mohl vytvořit web?
Ne. Tvůrce webů vám umožní ovládat vzhled a dojem z webu ve vizuálním editoru. CSS napíše platforma za vás. Znát základy CSS je užitečné, pokud chcete pochopit, proč věci vypadají tak, jak vypadají, ale k vytvoření profesionálního webu s tvůrcem webů WEMASY nemusíte napsat ani řádek.
Jaký je rozdíl mezi CSS a HTML?
HTML určuje strukturu webové stránky, tedy čím každý kus obsahu je. CSS určuje, jak vypadá. HTML vytvoří nadpis. CSS z něj udělá nadpis určité barvy, velikosti a písma. Spolupracují: HTML dodává prvky, CSS je stylizuje.
Může CSS ovlivnit rychlost webu?
Ano. Velké, neefektivní soubory CSS přidávají váhu každému načtení stránky. Neoptimalizované CSS také může prohlížeči bránit ve vykreslení stránky, dokud nepřečte všechny styly, což zdržuje, jak rychle návštěvníci váš obsah uvidí. Čisté, minimální CSS se načítá rychleji. To je jeden z důvodů, proč pro rychlost webu záleží na tom, že stavíte na dobře napsané platformě.
Co je CSS framework?
CSS framework je předpřipravená sada pravidel CSS, kterou vývojáři používají jako výchozí bod místo psaní všeho od nuly. Zrychluje vývoj a hned nabízí jednotné, otestované styly. Většina tvůrců webů používá CSS framework uvnitř, takže šablony, které vytvářejí, jsou už dobře strukturované a spolehlivé.
Dá se pomocí CSS docílit, aby web vypadal dobře na počítači i na mobilu?
Ano, a je to vlastně jeden z nejdůležitějších úkolů CSS. Pomocí media queries CSS uplatňuje různé styly podle velikosti obrazovky. Na široké obrazovce počítače se může obsah zobrazit ve více sloupcích s velkými obrázky. Na telefonu se tytéž sloupce skládají pod sebe, upraví se velikosti písma a mezery se zmenší, aby se vešly na menší obrazovku. Takto funguje responzivní design a vše se řeší přes CSS bez nutnosti samostatné mobilní verze webu.
Co se stane, když se CSS na stránce nenačte?
Pokud se soubor CSS nenačte, stránka se stále zobrazí, ale bez jakéhokoli stylu. Uvidíte prostý text a obrázky bez barev, písem a rozvržení. Všechno bude poskládané pod sebou v pořadí, v jakém je v HTML. Vypadá to rozbitě, ale obsah tam technicky stále je. Na dobře udržovaných platformách je to vzácné, ale je to dobrá připomínka, kolik vizuální práce CSS na každé stránce nenápadně odvádí.