Webové stránky pozostávajú z niekoľkých samostatných častí vrátane obrázkov, textu a rôznych dokumentov. Tieto dokumenty zahŕňajú nielen dokumenty, na ktoré je možné odkazovať z rôznych stránok, napríklad súbory PDF, ale aj dokumenty, ktoré sa používajú na vytvorenie samotných stránok, napríklad HTML dokumenty na určenie štruktúry stránky a dokumentov CSS (kaskádových štýlov), ktoré určujú vzhľad stránky. Tento článok sa bude venovať CSS a bude sa zaoberať tým, čo to je a kde sa dnes používa na webových stránkach.
Lekcia histórie CSS
CSS bol prvýkrát vyvinutý v roku 1997 ako spôsob, ako môžu weboví vývojári definovať vizuálny vzhľad webových stránok, ktoré vytvárajú. Malo to umožniť webovým profesionálom oddeliť obsah a štruktúra kódu webových stránok z vizuálneho dizajnu, niečo, čo pred týmto časom nebolo možné.
Oddelenie štruktúry a štýlu umožňuje HTML vykonávať viac funkcií, na ktorých bolo pôvodne založené - označenie obsahu bez obáv z dizajnu a rozloženia samotnej stránky, niečoho bežne známeho ako „vzhľad a dojem“ stránky stránke.
Vývoj CSS
CSS si získali popularitu až okolo roku 2000, keď webové prehliadače začali používať viac ako základné aspekty písma a farieb tohto značkovacieho jazyka. Dnes všetky moderné prehliadače podporujú všetky úrovne CSS 1, väčšinu úrovne CSS 2 a dokonca aj väčšinu aspektov úrovne CSS 3. Pretože sa CSS neustále vyvíja a zavádzajú sa nové štýly, začali webové prehliadače implementovať moduly ktoré do týchto prehľadávačov prinášajú novú podporu CSS a poskytujú webovým dizajnérom nové výkonné štýlové nástroje s.
V (mnohých) rokoch minulých existovali vybraní weboví dizajnéri, ktorí odmietli používať CSS pre web dizajn a vývoj webových stránok, ale táto prax dnes v priemysle takmer odišla. CSS je dnes široko používaný štandard vo webdizajne a bolo by ťažké nájsť každého, kto dnes pracuje v priemysle a nemal aspoň základné znalosti tohto jazyka.
CSS je skratka
Ako už bolo spomenuté, výraz CSS znamená „kaskádová štýlová tabuľka“. Poďme si túto frázu trochu rozobrať, aby sme lepšie vysvetlili, čo tieto dokumenty robia.
Slovo „šablóna štýlov“ sa vzťahuje na samotný dokument (ako HTML, súbory CSS sú skutočne iba textové dokumenty, ktoré je možné upravovať pomocou rôznych programov). Šablóny štýlov sa používajú na návrh dokumentov už mnoho rokov. Sú to technické špecifikácie rozloženia, či už tlačeného alebo online. Dizajnéri tlače už dlho používajú štýly, aby zabezpečili, že ich návrhy budú vytlačené presne podľa ich špecifikácií. Šablóna štýlov pre webovú stránku slúži rovnakému účelu, ale s pridanou funkciou tiež informuje webový prehliadač, ako vykresliť zobrazený dokument. Dnes je možné používať aj šablóny štýlov CSS mediálne dotazy zmeniť spôsob, akým stránka hľadá rôzne zariadenia a veľkosti obrazoviek. To je neuveriteľne dôležité, pretože umožňuje vykreslenie jedného dokumentu HTML odlišne podľa obrazovky, ktorá sa používa na prístup k nemu.
Kaskáda je skutočne zvláštna časť pojmu „kaskádový štýl“. Šablóna webových štýlov je určený na kaskádu v sérii štýlov, ako je rieka nad vodopádom. Voda v rieke naráža na všetky skaly vodopádu, ale iba tie na dne ovplyvňujú presne to, kadiaľ bude voda tiecť. To isté platí pre kaskádu v šablónach štýlov webových stránok.
Dizajnové tabuľky štýlov prepíšu predvolené tabuľky štýlov prehľadávača
Každá webová stránka je ovplyvnená najmenej jednou šablónou štýlov, aj keď webový dizajnér nepoužíva žiadne štýly. Tento štýl je šablónu štýlov užívateľského agenta - známe tiež ako predvolené štýly, ktoré webový prehliadač použije na zobrazenie stránky, ak nie sú uvedené ďalšie pokyny. Napríklad predvolené nastavenie hypertextových odkazov je modré a sú podčiarknuté. Tieto štýly pochádzajú z predvolenej šablóny štýlov webového prehliadača. Ak webový dizajnér poskytne ďalšie pokyny, prehliadač bude musieť vedieť, ktoré pokyny majú prednosť. Všetky prehľadávače majú svoje vlastné predvolené štýly, ale veľa z týchto predvolených nastavení (napríklad modré podčiarknuté textové odkazy) je zdieľaných vo všetkých alebo vo väčšine hlavných prehľadávačov a verzií.
Pre ďalší príklad predvoleného prehľadávača je v našom webovom prehliadači predvolené písmo „Times New Roman"zobrazené pri veľkosti 16. Takmer žiadna zo stránok, ktoré navštívime, sa však nezobrazuje v tejto rodine a veľkosti písma. Je to tak preto, lebo kaskáda definuje, že je potrebné predefinovať druhé štýly, ktoré nastavujú samotní dizajnéri veľkosť písma a rodina, majú prednosť pred predvolenými nastaveniami nášho webového prehliadača. Všetky šablóny štýlov, ktoré vytvoríte pre webovú stránku, budú mať väčšiu presnosť ako predvolené štýly prehľadávača, takže tieto predvolené hodnoty sa použijú, iba ak ich šablóna štýlov neprepíše. Ak chcete, aby boli odkazy modré a podčiarknuté, nemusíte robiť nič, pretože to je predvolené, ale ak súbor CSS vášho webu hovorí, že odkazy by mali byť zelené, táto farba prepíše predvolenú modrú. Podčiarknutie v tomto príklade zostane, pretože ste neurčili inak.
Kde sa používa CSS?
CSS možno tiež použiť na definovanie toho, ako majú vyzerať webové stránky, keď sú zobrazené v iných médiách ako a webový prehliadač. Môžete napríklad vytvoriť hárok štýlov tlače, ktorý definuje, ako sa má webová stránka vytlačiť. Pretože položky webovej stránky, ako sú navigačné tlačidlá alebo webové formuláre, nebudú mať na vytlačenej stránke žiadny účel, je možné pomocou Šablóny štýlov tlače tieto oblasti pri tlači „vypnúť“. Aj keď to na mnohých stránkach nie je bežnou praxou, možnosť vytvárať šablóny štýlov tlače je efektívna a atraktívna (v našom jazyku) skúsenosť - väčšina webových profesionálov to nerobí jednoducho preto, lebo rozsah rozpočtu stránky nevyžaduje túto ďalšiu prácu byť hotový).
Prečo je CSS dôležitý?
CSS je jedným z najsilnejších nástrojov, ktoré sa webový dizajnér môže naučiť, pretože pomocou neho môžete ovplyvniť celý vizuálny vzhľad webovej stránky. Dobre napísané štýly je možné rýchlo aktualizovať a umožniť webovým serverom zmeniť to, čo je na vizuáli prioritne vizuálne obrazovka, ktorá zase ukazuje hodnotu a zameranie pre návštevníkov bez toho, aby bolo potrebné vykonať akékoľvek zmeny v podkladové Označenie HTML.
Hlavnou výzvou CSS je, že sa treba učiť skutočne dosť - a keďže sa každý deň menia prehliadače, dnes dobre funguje nemusí mať zajtra zmysel, keď sa podporia nové štýly a iným sa upustí alebo upadnú v prospech jedného dôvodu alebo ďalší.
Krivka učenia CSS stojí za to
Pretože CSS môžu kaskádovito kombinovať a vzhľadom na to, ako rôzne prehliadače môžu interpretovať a implementovať smernice inak, môže byť CSS ťažšie naučiť sa ako obyčajný HTML. CSS sa tiež mení v prehľadávačoch tak, že to HTML skutočne nerobí. Len čo začnete používať CSS, uvidíte, že využitie sily štýlov vám poskytne neuveriteľnú flexibilitu v tom, ako rozložíte webové stránky a definujete ich vzhľad a dojem. Po ceste nazhromaždíte „vrece trikov“ štýlov a prístupov, ktoré pre vás v minulosti fungovali a na ktoré sa môžete znova obrátiť vytvárať nové webové stránky v budúcnosti.