Kaskádové štýly majú veľa výhod. Umožňujú vám používať rovnakú šablónu štýlov na celom vašom webe. Existujú dva spôsoby, ako to urobiť:
- prepojenie s prvkom LINK
- import pomocou príkazu @import
Výhody a nevýhody externých štýlov
Jedna z najlepších vecí o kaskádové štýly je, že ich môžete použiť na zabezpečenie konzistentnosti vášho webu. Najjednoduchší spôsob, ako to urobiť, je prepojiť alebo importovať externú šablónu štýlov. Ak použijete 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ýly.
Medzi výhody použitia externých šablón štýlov patrí napríklad to, že môžete ovládať vzhľad a štýl viacerých dokumentov naraz. To je obzvlášť užitočné, ak na vytváraní svojich webových stránok spolupracujete s tímom ľudí. Mnoho štýlových pravidiel môže byť ťažké zapamätať si, a hoci môžete mať vytlačeného sprievodcu štýlmi, je namáhavé ho mať neustále v ňom listovať, aby ste určili, či sa má príkladný text písať 12-bodovým písmom Arial alebo 14-bodovým písmom Kuriér.
Môžete vytvoriť triedy štýlov, ktoré sa potom dajú použiť na mnohých rôznych prvkoch HTML. Ak často používate špeciálne písmo Wingdings, aby ste zdôraznili rôzne veci na svojej stránke, môžete použiť Wingdings triedy, ktorú ste nastavili vo svojej šablóne štýlov, aby ste ich vytvorili, a nie definovať konkrétny štýl pre každú inštanciu súboru dôraz.
Svoje štýly môžete ľahko zoskupiť, aby boli efektívnejšie. Všetky metódy zoskupovania, ktoré sú k dispozícii v CSS, je možné použiť v externých šablónach štýlov. Toto vám poskytuje väčšiu kontrolu a flexibilitu na vašich stránkach.
To znamená, že existujú aj veľmi dobré dôvody, prečo nepoužívať externé štýly. Pre jedného môžu zvýšiť čas sťahovania, ak odkazujete na veľa z nich.
Zakaždým, keď vytvoríte nový súbor CSS a prepojíte ho alebo ho importujete do dokumentu, vyžaduje to, aby webový prehľadávač uskutočnil ďalšie volanie na webový server, aby získal súbor. A volania na serveroch spomaľujú načítanie stránok.
Ak máte iba malý počet štýlov, môžu zvýšiť zložitosť stránky. Pretože štýly nie sú viditeľné priamo v kóde HTML, musí každý, kto sa pozerá na stránku, zohnať ďalší dokument (súbor CSS), aby zistil, o čo ide.
Ako vytvoriť externú tabuľku štýlov
Externé štýly sa píšu rovnako ako vložené a vložené štýly. Musíte však napísať iba štýl selektor a vyhlásenie. V dokumente nepotrebujete prvok alebo atribút STYLE.
Rovnako ako u všetkých ostatných CSS, syntax pravidla je:
selektor {property: value; }
Tieto pravidlá sa zapisujú do textového súboru s príponou.
.css. Môžete napríklad pomenovať svoju šablónu štýlov.
štýly.css.
Prepojenie dokumentov CSS
Na prepojenie šablóny štýlov použijete prvok LINK. Toto má atribúty rel a href. Atribút rel informuje prehliadač, na čo odkazujete (v tomto prípade šablónu štýlov), a atribút href drží cestu k súboru CSS.
Existuje tiež voliteľný typ atribútu, ktorý môžete použiť na definovanie typu MIME prepojeného dokumentu. Toto nie je povinné v HTML5, ale malo by sa to použiť v dokumentoch HTML 4.
Tu je kód, ktorý by ste použili na prepojenie šablóny štýlov CSS s názvom styles.css:
A do dokumentu HTML 4 by ste napísali:
type = "text / css">
Import šablón štýlov CSS
Importované šablóny štýlov sú umiestnené v prvku STYLE. Ak chcete, môžete potom použiť aj vložené štýly. Importované štýly môžete tiež zahrnúť do prepojených šablón štýlov. Do dokumentu STYLE alebo CSS napíšte:
@import url (' http://www.yoursite.com/styles.css');