Webové stránky pozostávajú z množstva jednotlivých kusov, vrátane obrázkov, textu a rôznych dokumentov. Tieto dokumenty zahŕňajú nielen tie, ktoré môžu byť spojené s rôznymi stránkami, ako sú súbory PDF, ale aj dokumenty, ktoré sa používajú na vytváranie samotných stránok, ako napríklad dokumenty HTML na určenie štruktúry stránky a dokumentov CSS (kaskádový štýl) diktovať vzhľad stránky. Tento článok sa ponorí do CSS, pokrývajúc to, čo je a kde sa dnes používa na webových stránkach.
História CSS lekcie
CSS bol prvýkrát vyvinutý v roku 1997 ako spôsob, akým weboví vývojári definovali vizuálny vzhľad webových stránok, ktoré vytvárajú. Cieľom bolo umožniť webovým profesionálom oddeliť obsah a štruktúru kódu webových stránok od vizuálneho dizajnu, čo ešte predtým nebolo možné.
Oddelenie štruktúry a štýlu umožňuje HTML vykonávať viac funkcií, z ktorých sa pôvodne zakladalo - značkovanie obsahu bez toho, aby ste sa museli obávať dizajnu a usporiadania samotnej stránky, čo je všeobecne známe ako "vzhľad a dojem" stránky.
CSS nezískal popularitu až do roku 2000, kedy webové prehliadače začali používať viac než základné písmo a farebné aspekty tohto značkovacieho jazyka. Dnes všetky moderné prehliadače podporujú všetky CSS Level 1, väčšinu CSS úrovne 2 a dokonca väčšinu aspektov CSS Level 3. Keďže CSS sa naďalej vyvíja a predstavujú nové štýly, webové prehliadače začali implementovať moduly, ktoré prinášajú novú podporu CSS do týchto prehliadačov a dávajú webové dizajnérom silné nové štýlové nástroje, s ktorými môžete pracovať.
V (mnohých) rokoch minulého roka existovali vybraní web dizajnéri, ktorí odmietli používať CSS na dizajn a vývoj webových stránok, ale táto prax je v súčasnosti preč od odvetvia. CSS je teraz široko používaným štandardom v dizajne webových stránok a bolo by ťažké nájsť niekoho, kto pracuje v priemysle dnes, ktorý nemal aspoň základné znalosti o tomto jazyku.
CSS je skratka
Ako už bolo uvedené, pojem CSS znamená "Kaskádový štýl". Rozpusťme túto frázu trochu viac, aby sme lepšie vysvetlili, čo tieto dokumenty robia.
Slovo "stylesheet" sa vzťahuje na samotný dokument (napríklad HTML, súbory CSS sú naozaj len textové dokumenty, ktoré je možné editovať rôznymi programami). Štýlové listy sa už dlhé roky používajú na dizajn dokumentov. Sú to technické špecifikácie rozloženia, či už tlačené alebo online. Tvorcovia tlače už dlho používajú šablóny so štýlmi, 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 funkčnosťou tiež informuje webový prehliadač o tom, ako zobraziť dokument. V súčasnosti štýly šablón CSS môžu použiť aj mediálne dopyty na zmenu spôsobu, akým stránka hľadá rôzne zariadenia a veľkosti obrazovky. Je to neuveriteľne dôležité, pretože umožňuje jediný dokument HTML vykresliť inak podľa obrazovky, ktorá sa používa na prístup k nemu.
Cascade je naozaj špeciálna časť pojmu "kaskádový štýl". Webový štýl štýlu je určený na kaskádu cez sériu štýlov v tomto hárku, ako rieka nad vodopádom. Voda v rieke zasiahne všetky skaly vo vodopáde, ale iba tie, ktoré sú v dolnej časti, ovplyvňujú presne tam, kde bude voda prúdiť. To isté platí o kaskáde webových štýlov.
Každá webová stránka je ovplyvnená minimálne jedným štýlom, aj keď návrhár webových stránok neuplatňuje žiadne štýly. Táto šablóna štýlov je štýl štýlu používateľského agenta - tiež známy ako predvolené štýly, ktoré webový prehliadač použije na zobrazenie stránky, ak nie sú k dispozícii žiadne ďalšie pokyny. Napríklad štandardne sú hypertextové odkazy štýlovo modré a sú podčiarknuté. Tieto štýly pochádzajú z predvoleného štýlu webového prehliadača. Ak webový návrhár poskytuje ďalšie pokyny, prehliadač bude musieť vedieť, ktoré pokyny majú prednosť. Všetky prehliadače majú svoje vlastné predvolené štýly, ale mnohé z týchto predvolených (ako modré podčiarknuté textové odkazy) sú zdieľané vo všetkých alebo väčšinách hlavných prehliadačov a verzií.
Pri ďalšom príklade predvoleného prehliadača je v našom webovom prehliadači predvolené písmo "Times New Roman" zobrazené na veľkosti 16. Takmer žiadna zo stránok, ktoré navštívime zobrazenie v tejto rodine a veľkosti písma, však. Je to preto, že kaskáda definuje, že druhé štýlové listy, ktoré nastavili samotní dizajnéri, predefinovali veľkosť písma a rodinu, čím prerušili predvolené nastavenia nášho webového prehliadača. Všetky šablóny štýlov, ktoré vytvoríte pre webovú stránku, budú mať špecifickejšiu špecifikáciu než predvolené štýly prehliadača, takže tieto predvolené nastavenia sa použijú len vtedy, ak ich štýl nebude prepisovať. Ak chcete, aby odkazy boli modré a podčiarknuté, nemusíte robiť nič, pretože to je predvolené, ale ak súbor CSS na vašom webe hovorí, že odkazy by mali byť zelené, táto farba bude prepísať predvolenú modrú farbu. Podčiarknutie zostane v tomto príklade, pretože ste neuviedli inak.
Kde sa používa CSS?
CSS je možné použiť aj na definovanie toho, ako by mali webové stránky vypadať pri prezeraní v iných médiách, ako je webový prehliadač. Môžete napríklad vytvoriť hárok štýlu tlače, ktorá definuje, ako má webová stránka vytlačiť. Pretože položky webových stránok, ako sú navigačné tlačidlá alebo webové formuláre, nebudú mať na vytlačenej stránke žiadny zmysel, tlačový štýl tlače sa môže používať na vypnutie týchto oblastí po vytlačení stránky.Aj keď na mnohých stránkach nie je naozaj bežnou praxou, možnosť vytvárať listy štýlov je silná a atraktívna (podľa našich skúseností - väčšina webových profesionálov to nerobí jednoducho preto, lebo rozsah rozpočtu stránok nevyžaduje, aby sa táto ďalšia práca vykonala ).
Prečo je CSS dôležitý?
CSS je jedným z najvýkonnejších nástrojov, ktorý sa webový dizajnér môže učiť, pretože s ním môžete ovplyvniť celý vizuálny vzhľad webových stránok. Dobre napísané šablóny so štýlmi sa dajú rýchlo aktualizovať a umožňujú stránkam meniť to, čo je na obrazovke prioritou vizuálne, čo zase ukazuje hodnotu a zamerať sa na návštevníkov bez toho, aby sa museli urobiť zmeny v základnej značke HTML.
Hlavnou výzvou CSS je, že sa dá naučiť trochu - as každým dňom sa menia prehliadače, čo dnes dobre funguje, nemusia mať zajtra zmysel, pretože nové štýly sa podporujú a iné sú z jedného dôvodu upustené ,
Vzhľadom na to, že CSS môže kaskádovať a kombinovať, a vzhľadom na to, ako rôzne prehliadače môžu interpretovať a implementovať smernice inak, môže byť CSS ťažšie ako obyčajný HTML master. CSS tiež mení v prehliadačoch spôsobom, ktorý HTML skutočne nemá. Akonáhle začnete používať službu CSS, uvidíte, že využitím sily štýlov vám poskytne neuveriteľnú flexibilitu v tom, ako rozvrhnete webové stránky a definujete ich vzhľad. Po ceste, budete hromadiť "vrece triky" štýly a prístupy, ktoré pracujú pre vás v minulosti a ktoré sa môžete obrátiť na znovu, ako budete budovať nové webové stránky v budúcnosti.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 7/5/17
