Čo sú to kaskádové štýly?
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, keď webové prehliadače začali používať viac ako základné písmo a farebné aspekty tohto značkovacieho jazyka. Dnes všetky moderné prehliadače podporujú všetky CSS úrovne 1, väčšinu CSS Level 2 a dokonca väčšinu aspektov CSS Level 3. Vzhľadom na to, že CSS sa naďalej vyvíja a zavádzajú nové štýly, webové prehliadače začali implementovať moduly, ktoré prinášajú novú podporu CSS do týchto prehliadačov a poskytujú webové dizajnérom silné nové štýlové nástroje, s ktorými môžete pracovať.
V (mnohých) rokoch minulého storočia boli 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 oblasti web dizajnu a vy by ste sa ťažko snažili 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 "štýl štýlu" 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 sa uistili, že ich návrhy sú 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í.
Pre ďalší príklad predvoleného prehliadača je v mojom webovom prehliadači predvolené písmo " Times New Roman " zobrazené na veľkosti 16. Takmer žiadna z navštívených stránok sa nezobrazí v tejto rodine a veľkosti písma. Je to preto, že kaskáda definuje, že druhé štýlové listy, ktoré nastavili samotní dizajnéri, predefinovali veľkosť a rodinu písma , pričom vylúčili predvolené nastavenia webového prehliadača. Všetky šablóny štýlov, ktoré vytvoríte pre webovú stránku, budú mať špecifickejšiu špecifikáciu ako predvolené štýly prehliadača, takže tieto predvolené nastavenia sa použijú len vtedy, ak ich štýl štýlu ich nenahradí. 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 sa tiež môže používať na definovanie toho, ako by mali webové stránky vyzerať pri zobrazení v iných médiách ako v webovom prehliadači. 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. Zatiaľ čo na mnohých stránkach nie je naozaj bežná prax, možnosť vytvárať listy štýlov tlače je silná a atraktívna (podľa mojich skúseností - väčšina webových profesionálov to nerobí jednoducho preto, lebo oblasť rozpočtu rozpočtu 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 vrátiť k opäť pri budovaní nových webových stránok v budúcnosti.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 7. 5. 17,