Ako vytvoriť externý štýl

Používanie stránky CSS

Webové stránky sú kombináciou štýlu a štruktúry a na dnešnom webe je najlepšou praxou zachovať tieto dva aspekty webovej stránky oddelené od seba.

HTML bol vždy to, čo poskytuje stránky s ich štruktúrou. V počiatočných dňoch webu HTML obsahovalo aj štýlové informácie. Prvky, ako je značka , boli pokryté kódom HTML a doplnili informácie o vzhľade spolu so štrukturálnymi informáciami. Pohyb webových štandardov nás tlačil k zmene tejto praxe a namiesto toho tlačiť všetky informácie o štýle do CSS alebo kaskádových štýlov. Pokračovaním v tomto kroku sú súčasné odporúčania, aby ste použili to, čo je známe ako "externý štýl štýlu" pre potreby štýlu webových stránok.

Výhody a nevýhody vonkajších štýlov

Jednou z najlepších vecí o kaskádových štýloch je to, že ich môžete použiť, aby ste udržali celú vašu stránku konzistentnú. Najjednoduchší spôsob je prepojenie alebo import externého štýlu . Ak používate rovnakú externú šablónu štýlov pre každú stránku vášho webu, môžete si byť istí, že všetky stránky budú mať rovnaký štýl. Môžete tiež uľahčiť zmeny v budúcnosti. Vzhľadom na to, že každá stránka používa rovnaký externý štýl, každá zmena v tomto hárku bude mať vplyv na každú stránku stránky. Je to oveľa lepšie ako potreba meniť každú stránku individuálne!

Výhody vonkajších štýlov

  • Môžete ovládať vzhľad viacerých dokumentov naraz.
    • To je obzvlášť užitočné, ak pracujete s tímom ľudí na vytvorenie svojej webovej stránky. Mnoho pravidiel štýlu môže byť ťažko zapamätateľné a aj keď môžete mať vytlačený sprievodca štýlom, je neefektívne a zdĺhavé, že sa neustále prechádza cez to, aby zistil, či príklad textu má byť napísaný v 12 bodoch písmo Arial alebo 14-bodový kurýr. Tým, že máte všetko na jednom mieste, a pretože toto miesto je aj tam, kde by ste robili zmeny, môžete urobiť údržbu oveľa jednoduchšie.
  • Môžete vytvoriť triedy štýlov, ktoré potom môžete použiť na mnohých rôznych elementoch HTML .
    • Ak často používate určitý štýl písma, aby ste na svojej stránke zdôrazňovali rôzne veci, môžete použiť atribút triedy, ktorý ste nastavili vo svojej štýle, aby ste získali tento vzhľad a pocit, namiesto definovania konkrétneho štýlu pre každú inštanciu dôraz.
  • Môžete jednoducho zoskupovať svoje štýly, aby boli efektívnejšie.
    • Všetky metódy zoskupenia, ktoré sú k dispozícii pre službu CSS, sa môžu použiť vo vonkajších štýloch šablón, čo vám na stránke poskytuje väčšiu kontrolu a flexibilitu.

Nevýhody vonkajších štýlov

  • Externé štýly môžu zvýšiť čas sťahovania, najmä ak sú extrémne veľké. Vzhľadom k tomu, že súbor CSS je samostatný dokument, ktorý sa musí načítať, bude to ovplyvňovať výkon tohto preberania.
  • Externé šablóny štýlov sa rýchlo rozširujú, pretože je ťažké rozpoznať, kedy sa štýl už nepoužíva, pretože po odstránení stránky sa nevymaže. Správna správa vašich súborov CSS je dôležitá, najmä ak pracuje viac ľudí na tom istom súbore.
  • Ak máte iba jednu stránku na jednej stránke, externý súbor pre službu CSS nemusí byť potrebný, pretože máte iba jednu stranu, ktorú chcete štýlovať. Mnohé z výhod externých CSS sa strácajú, keď máte iba stránku s jednou stránkou.

Ako vytvoriť externý štýl

Externé šablóny štýlov sú vytvorené s podobnou syntaxou s listami štýlov dokumentov. Všetko, čo musíte zahrnúť, sú selektor a deklarácia. Rovnako ako v štýle dokumentov na úrovni dokumentu, syntax pravidla je:

selektor {vlastnosť: hodnota;}

Tieto pravidlá uložte do textového súboru s príponou .css. To sa nevyžaduje, ale je to dobrý návyk sa dostať do, takže môžete okamžite rozpoznať svoje štýly listy v zozname adresárov.

Keď máte dokument štýlov, musíte ho prepojiť s webovými stránkami . Môže to byť vykonané dvoma spôsobmi:

  1. prepojenie
    1. Na prepojenie šablóny štýlov používate značku HTML. Toto má atribúty rel , typ a href . Atribút rel informuje o tom, čo prepájate (v tomto prípade štýl), typ definuje typ MIME pre prehliadač a href je cesta k súboru .css.
  2. import
    1. Použili by ste importovaný štýl hárkov v hárku štýlov na úrovni dokumentu, aby ste mohli importovať atribúty externého štýlu hárkov, pričom ste nestratili žiadne dokumenty špecifické pre daný dokument. Voláte ho podobným spôsobom, ako volanie prepojeného štýlu hárkov, iba to musí byť vyvolané vo vyhlásení štýlu dokumentov. Môžete importovať toľko externých šablón štýlov, ako potrebujete na údržbu vášho webu.

Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 8/8/17