Webové stránky se skládají z řady jednotlivých částí, včetně obrázků, textu a různých dokumentů. Tyto dokumenty zahrnují nejen ty, na které lze odkazovat z různých stránek, například soubory PDF, ale také dokumenty, které se používají k vytvoření samotných stránek, například Dokumenty HTML k určení struktury stránky a dokumentů CSS (kaskádových stylů), které určují vzhled stránky. Tento článek se ponoří do CSS a pojednává o tom, co to je a kde se dnes používá na webových stránkách.
Lekce historie CSS
CSS byl poprvé vyvinut v roce 1997 jako způsob, jak pro webové vývojáře definovat vizuální vzhled webových stránek, které vytvářejí. Mělo to umožnit webovým profesionálům oddělte obsah a struktura kódu webové stránky z vizuálního designu, něco, co před touto dobou nebylo možné.
Oddělení struktury a stylu umožňuje HTML vykonávat více funkcí, na kterých bylo původně založeno - označení obsahu, aniž byste se museli starat o design a rozvržení samotné stránky, něco běžně známého jako „vzhled a chování“ stránky strana.
Vývoj CSS
CSS si získaly na popularitě až kolem roku 2000, kdy webové prohlížeče začaly používat více než základní aspekty písma a barev tohoto značkovacího jazyka. Dnes všechny moderní prohlížeče podporují všechny úrovně CSS úrovně 1, většinu úrovně CSS úrovně 2 a dokonce i většinu aspektů úrovně CSS úrovně 3. Jak se CSS neustále vyvíjí a zavádějí se nové styly, začaly webové prohlížeče implementovat moduly které do těchto prohlížečů přinášejí novou podporu CSS a dávají webovým návrhářům nové výkonné stylové nástroje k práci s.
V (mnoha) letech minulých existovali vybraní weboví designéři, kteří pro CSS odmítli používat CSS design a vývoj webových stránek, ale tato praxe je dnes z tohoto odvětví téměř pryč. CSS je nyní široce používaným standardem v oblasti webového designu a bylo by těžké najít někoho, kdo by dnes pracoval v tomto odvětví a neměl alespoň základní znalost tohoto jazyka.
CSS je zkratka
Jak již bylo zmíněno, termín CSS znamená „Cascading Style Sheet“. Pojďme si tuto frázi trochu rozdělit, abychom lépe vysvětlili, co tyto dokumenty dělají.
Slovo „Šablona stylů“ odkazuje na samotný dokument (jako HTML, soubory CSS jsou ve skutečnosti jen textové dokumenty, které lze upravovat pomocí různých programů). Šablony stylů se pro návrh dokumentů používají již mnoho let. Jedná se o technické specifikace rozvržení, ať už tištěného nebo online. Tiskoví designéři již dlouho používají šablony stylů, aby zajistili, že jejich návrhy budou vytištěny přesně podle jejich specifikací. Šablona stylů pro webovou stránku slouží stejnému účelu, ale s přidanou funkcí také informuje webový prohlížeč, jak vykreslit zobrazovaný dokument. Dnes lze používat i šablony stylů CSS mediální dotazy změnit způsob, jakým stránka hledá různá zařízení a velikosti obrazovky. To je neuvěřitelně důležité, protože umožňuje vykreslení jednoho dokumentu HTML odlišně podle obrazovky, která se k němu používá.
Kaskáda je opravdu speciální část pojmu „kaskádový styl“. Šablona webových stylů je určen k kaskádě skrz řadu stylů v tomto listu, jako řeka přes vodopád. Voda v řece narazí na všechny kameny ve vodopádu, ale pouze ty na dně ovlivňují přesně to, kam bude voda proudit. Totéž platí o kaskádě v šablonách stylů webových stránek.
Návrhové šablony stylů přepíšou výchozí šablony stylů prohlížeče
Každá webová stránka je ovlivněna alespoň jednou šablonou stylů, i když webový designér nepoužívá žádné styly. Tato šablona stylů je seznam stylů uživatelského agenta - známé také jako výchozí styly, které webový prohlížeč použije k zobrazení stránky, pokud nejsou poskytnuty žádné další pokyny. Například ve výchozím nastavení jsou hypertextové odkazy označeny modře a jsou podtrženy. Tyto styly pocházejí z výchozí šablony stylů webového prohlížeče. Pokud však webový designér poskytne další pokyny, bude prohlížeč potřebovat vědět, které pokyny mají přednost. Všechny prohlížeče mají své vlastní výchozí styly, ale mnoho z těchto výchozích nastavení (například modré podtržené textové odkazy) je sdíleno ve všech nebo ve většině hlavních prohlížečů a verzí.
Pro další příklad výchozího nastavení prohlížeče je v našem webovém prohlížeči výchozí písmo „Times New Roman"zobrazeno ve velikosti 16. Téměř žádná ze stránek, které navštěvujeme, však není zobrazena v této rodině a velikosti písma. Důvodem je, že kaskáda definuje, že druhé šablony stylů, které jsou nastaveny samotnými návrháři, předefinují velikost písma a rodina, přepíše výchozí nastavení našeho webového prohlížeče. Všechny šablony stylů, které vytvoříte pro webovou stránku, budou mít větší přesnost než výchozí styly prohlížeče, takže tato výchozí nastavení budou platit pouze v případě, že je šablona stylů nepřepíše. Pokud chcete, aby odkazy byly modré a podtržené, nemusíte dělat nic, protože to je výchozí, ale pokud soubor CSS vašeho webu říká, že odkazy by měly být zelené, tato barva přepíše výchozí modrou. Podtržení v tomto příkladu zůstane, protože jste nezadali jinak.
Kde se používá CSS?
CSS lze také použít k definování toho, jak mají webové stránky vypadat při prohlížení na jiném médiu než a webový prohlížeč. Můžete například vytvořit šablonu stylů tisku, která definuje, jak se má webová stránka vytisknout. Protože položky webové stránky, jako jsou navigační tlačítka nebo webové formuláře, nebudou mít na vytištěné stránce žádný účel, lze k jejich vypnutí při tisku stránky použít šablonu stylů tisku. I když to na mnoha webech není běžnou praxí, je možnost vytvářet šablony stylů tisku silná a atraktivní (v našem zkušenost - většina webových profesionálů to nedělá jednoduše proto, že rozsah rozpočtu webu nevyžaduje tuto další práci být hotov).
Proč je CSS důležité?
CSS je jedním z nejúčinnějších nástrojů, které se webový designér může naučit, protože s ním můžete ovlivnit celý vizuální vzhled webu. Dobře napsané šablony stylů lze rychle aktualizovat a umožnit webům vizuálně změnit prioritu obrazovka, která zase ukazuje hodnotu a zaměření pro návštěvníky, aniž by bylo nutné provádět jakékoli změny základní Značky HTML.
Hlavní výzvou CSS je, že je toho hodně, co se musíme naučit - a vzhledem k tomu, že se prohlížeče každý den mění, to, co dnes funguje dobře nemusí zítra dávat smysl, protože se začnou podporovat nové styly a ostatním bude upuštěno nebo upadne z laskavosti z jednoho důvodu nebo další.
Křivka učení CSS stojí za to
Protože CSS může kaskádovat a kombinovat a vzhledem k tomu, jak různé prohlížeče mohou interpretovat a implementovat směrnice odlišně, může být CSS obtížnější se naučit než prostý HTML. CSS se také mění v prohlížečích způsobem, který HTML opravdu není. Jakmile začnete používat CSS, uvidíte, že využití síly stylů vám poskytne neuvěřitelnou flexibilitu ve způsobu rozložení webových stránek a definování jejich vzhledu a chování. Po cestě nashromáždíte „pytel triků“ stylů a přístupů, které pro vás v minulosti fungovaly a na které se můžete znovu obrátit vytvářet nové webové stránky v budoucnu.