Webové stránky se skládají z několika kusů, včetně obrázků, textu a různých dokumentů. Tyto dokumenty zahrnují nejen ty, které mohou být propojeny z různých stránek, jako jsou soubory PDF, ale také dokumenty, které se používají k vytvoření samotných stránek, jako jsou dokumenty HTML pro určení struktury stránky a dokumentů CSS (kaskádový styl) diktovat vzhled stránky. Tento článek se ponoří do CSS, pokrývá, co je a kde se dnes používá na webových stránkách.
CSS Historie lekce
CSS byl poprvé vyvinut v roce 1997 jako způsob, jak weboví vývojáři definovat vizuální vzhled webových stránek, které vytvářejí. Cílem bylo umožnit webovým profesionálům oddělit obsah a strukturu kódu webové stránky od vizuálního designu, což nebylo možné předtím.
Oddělení struktury a stylu umožňuje HTMLu vykonávat více funkcí, ze kterých byl původně založen - značení obsahu, aniž by se museli starat o návrh a uspořádání samotné stránky, něco běžně nazývaného "vzhled a pocit" stránky.
CSS nezískal popularitu až do roku 2000, kdy webové prohlížeče začaly používat více než základní písmo a barevné aspekty tohoto značkovacího jazyka. Všechny moderní prohlížeče dnes podporují všechny úrovně CSS úrovně 1, většinu úrovně CSS Level 2 a dokonce většinu aspektů CSS Level 3. Vzhledem k tomu, že CSS se stále vyvíjí a zavádějí nové styly, webové prohlížeče začaly implementovat moduly, které přinášejí novou podporu CSS do těchto prohlížečů a poskytne webovým návrhářům výkonné nové stylové nástroje, s nimiž můžete pracovat.
V (mnoha) letech minulého roku existovaly vybraní weboví tvůrci, kteří odmítli používat CSS pro návrh a vývoj webových stránek, ale tato praxe je dnes z průmyslu pryč. CSS je nyní široce používaným standardem v designu webových stránek a vy byste byli nuceni najít každého, kdo pracuje v oboru dnes, který neměl alespoň základní znalost tohoto jazyka.
CSS je zkratka
Jak již bylo uvedeno, termín CSS znamená "Cascading Style Sheet." Rozpusťme tuto frázi dolů, abychom lépe vysvětlili, co tyto dokumenty dělají.
Slovo "stylesheet" odkazuje na samotný dokument (jako HTML, soubory CSS jsou ve skutečnosti pouze textové dokumenty, které lze editovat různými programy). Stylové listy se již mnoho let používají pro návrh dokumentů. Jedná se o technické specifikace rozvržení, ať už tisknout nebo online. Tiskové designéry již dlouho používají stylové listy, aby zajistily, ž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 funkčností také informuje webový prohlížeč o tom, jak zobrazit dokument. Dnes mohou listy stylů CSS také používat dotazy médií ke změně způsobu, jakým stránka hledá různá zařízení a velikosti obrazovky. To je neuvěřitelně důležité, protože dovoluje, aby jeden dokument HTML byl vykreslen jiným způsobem podle obrazovky, která byla použita k jeho přístupu.
Cascade je opravdu zvláštní část termínu "kaskádový stylový list". Styl webového stylu je určen ke kaskádování sérií stylů v tomto listu, jako řeka nad vodopádem. Voda v řece zasáhne všechny skály ve vodopádu, ale pouze ty na dně ovlivňují přesně tam, kde bude voda proudit. Totéž platí pro kaskádu ve webových stránkách stylů.
Každá webová stránka je ovlivněna alespoň jedním stylem, a to i v případě, že webový návrhář neuplatňuje žádné styly. Tento stylový štítek je styl stylu uživatelského agenta - známý také jako výchozí styl, který webový prohlížeč použije k zobrazení stránky, pokud nejsou poskytnuty žádné další pokyny. Standardní hypertextové odkazy jsou například ve stylu modré a jsou podtrženy. Tyto styly pocházejí z výchozího stylu webového prohlížeče. Pokud však webdesigner poskytuje další pokyny, musí prohlížeč vědět, které instrukce mají přednost. Všechny prohlížeče mají své vlastní výchozí styly, ale mnoho z těchto výchozích hodnot (jako jsou modré podtržené textové odkazy) je sdíleno ve všech nebo většině hlavních prohlížečích a verzích.
Dalším příkladem výchozího nastavení prohlížeče je v našem webovém prohlížeči výchozí písmo "Times New Roman" zobrazeno na velikosti 16. Téměř žádná ze stránek, které navštívíme v této rodině a velikosti písma. Je to proto, že kaskáda definuje, že druhé listy stylů, které jsou nastaveny samotnými designéry, předefinují velikost a rodinu písma, čímž vyloučí výchozí nastavení našeho webového prohlížeče. Jakékoli listy stylů, které vytvoříte pro webovou stránku, budou mít specifičtější než výchozí styly prohlížeče, takže tyto výchozí hodnoty se použijí pouze tehdy, pokud jejich stylový list nepřehradí. Chcete-li, aby odkazy byly modré a podtržené, nemusíte dělat nic, protože to je výchozí, ale pokud soubor CSS na webu uvádí, že by odkazy měly být zelené, tato barva bude přepsat výchozí modrou barvu. Podtrhnutí zůstane v tomto příkladu, protože jste neuvedli jinak.
Kde se používá CSS?
CSS lze také použít k definování, jak by měly vypadat webové stránky při prohlížení v jiných médiích, než je webový prohlížeč. Můžete například vytvořit list stylu tisku, který definuje, jak má stránka vytisknout. Vzhledem k tomu, že na webových stránkách, jako jsou navigační tlačítka nebo webové formuláře, nebude na vytištěné stránce žádný účel, může se při tisku stránky použít "Print Style Sheet" pro vypnutí těchto oblastí.Zatímco na mnoha místech není běžná praxe, možnost vytváření listů stylů tisku je silná a přitažlivá (podle našich zkušeností - většina webových profesionálů to neudělá jednoduše proto, že rozsah rozpočtu webu nevyžaduje tuto další práci ).
Proč je CSS důležitý?
CSS je jedním z nejvýkonnějších nástrojů, které se webový návrhář může naučit, protože s ním můžete ovlivnit celý vizuální vzhled webových stránek. Dobře napsané styly mohou být rychle aktualizovány a umožňují stránkám měnit to, co je na obrazovce zobrazeno jako priorita, což zase ukazuje hodnotu a zaměří se na návštěvníky, aniž by bylo nutné provádět změny v podkladové značce HTML.
Hlavním úkolem CSS je, že se to má trochu učit - a každý den, kdy se prohlížeče mění, to, co dnes funguje, nemusí mít zítra smysl, protože nové styly jsou podporovány a jiné jsou z jednoho důvodu .
Vzhledem k tomu, že CSS může kaskádovat a kombinovat a vzhledem k tomu, jak mohou různé prohlížeče interpretovat a implementovat směrnice jinak, může být CSS mnohem obtížnější než obyčejný HTML master. CSS také mění prohlížeče způsobem, který HTML skutečně neplatí. Jakmile začnete používat CSS, uvidíte, že využívání síly listů stylů vám poskytne neuvěřitelnou flexibilitu v tom, jak rozmístíte webové stránky a definujete jejich vzhled. Na cestě vám hromadí "sáček triků" stylů a přístupů, které vám v minulosti pracovaly a na které se můžete v budoucnu znovu obrátit při vytváření nových webových stránek.
Původní článek Jennifer Krynin. Upraveno Jeremy Girardem 7. 5. 17
