Inline, embedded a externé štýly: Tu je to, čo potrebujete vedieť
Rozvoj webových stránok na prednej strane je často znázornený ako stolička s 3 nohami. Tieto nohy sú nasledovné:
Druhá časť tejto stoličky, CSS alebo kaskádové štýly, je to, čo tu dnes pozeráme. Konkrétne sa chceme zaoberať tromi druhmi štýlov, ktoré môžete pridať do dokumentu.
- Inline štýly
- Vstavané štýly
- Externé štýly
Každý z týchto typov štýlov CSS má svoje výhody a nevýhody, takže sa pozrieme hlbšie na každú z nich individuálne.
Inline štýly
Inline štýly sú štýly, ktoré sú napísané priamo v značke v dokumente HTML. Inline štýly ovplyvňujú iba konkrétnu značku, na ktorú sa vzťahujú. Tu je príklad inline štýlu aplikovaného na štandardný odkaz, alebo kotva, značka:
Toto pravidlo CSS by z tohto jedného odkazu zmenilo štandardnú dekoráciu podčiarknutia textu. Nebolo by však na stránke zmenené žiadne ďalšie odkazy. Toto je jedno z obmedzení inline štýlov. Vzhľadom na to, že sa menia iba na konkrétnej položke, budete musieť s týmito štýlmi vrhnúť HTML tak, aby ste dosiahli skutočný dizajn stránky. To nie je najlepšia prax. V skutočnosti je to jeden krok odstránený z dní značiek "font" a zmes štruktúry a štýlu na webových stránkach.
Inline štýly majú tiež veľmi vysokú špecifickosť.
Tým je veľmi ťažké prepísať s inými štýlmi, ktoré nie sú inline. Napríklad, ak chcete prispôsobiť stránky a zmeniť spôsob, akým sa niektorý prvok pozerá na určité body zlomu pomocou mediálnych dopytov , inline štýly na prvku to urobia veľmi ťažko.
Nakoniec, inline štýly sú naozaj vhodné iba vtedy, keď sa používajú veľmi šetrne.
V skutočnosti som zriedka používal inline štýly na svojich webových stránkach.
Vstavané štýly
Vstavané štýly sú štýly, ktoré sú vložené v hlave dokumentu. Vstavané štýly ovplyvňujú iba značky na stránke, do ktorej sú vložené. Tento prístup opäť neguje jednu zo silných stránok CSS. Vzhľadom k tomu, že každá stránka by mala štýly v
, ak chcete zmeniť celú lokalitu, ako napríklad meniť farbu odkazov z červenej na zelenú, musíte túto zmenu vykonať na každej stránke, pretože každá stránka používa vložený štýl. Toto je lepšie ako inline štýly, ale v mnohých prípadoch je stále problematické.
Štylizované štýly, ktoré sa pridajú do priečinka
dokumentu tiež pridať na túto stránku značný počet kódov, čo tiež môže v budúcnosti robiť stránku ťažšie.
Výhodou vložených šablón štýlov je to, že zaťaženie okamžite s samotnou stránkou namiesto toho, aby bolo potrebné načítať iné externé súbory. To môže byť prínosom pre rýchlosť sťahovania a perspektívu výkonu .
Externé štýly
Väčšina webových stránok dnes používa externé štýly. Externé štýly sú štýly, ktoré sú napísané v samostatnom dokumente a potom sú pripojené k rôznym webovým dokumentom. Externé štýly so štýlmi môžu ovplyvniť akýkoľvek dokument, na ktorý sú pripojené, čo znamená, že ak máte webovú stránku s 20 stránkami, kde každá stránka používa rovnaký štýl štýlu (zvyčajne sa to robí), môžete vykonať vizuálnu zmenu každého týchto stránok jednoduchou úpravou tohto štýlu.
To robí dlhodobé riadenie stránok oveľa jednoduchšie.
Nevýhodou pre externé šablóny štýlov je to, že vyžadujú stránky na načítanie a načítanie týchto externých súborov. Nie každá stránka bude používať každý štýl v hárku CSS, takže veľa stránok načíta veľa väčšej stránky CSS, ako skutočne potrebuje.
Hoci je pravda, že existuje výkonný výsledok pre externé súbory CSS, určite sa dá minimalizovať. Realisticky sú súbory CSS len textové súbory, takže zvyčajne nie sú príliš veľké na začiatok. Ak celá vaša stránka používa 1 súbor CSS, získate tiež výhodu toho, že tento dokument je uložený do vyrovnávacej pamäte po prvom načítaní.
To znamená, že na prvej stránke môže dôjsť k miernemu výkonu, niektoré návštevy, ale nasledujúce stránky budú používať súbor CSS vo vyrovnávacej pamäti, takže akýkoľvek hit by bol negovaný. Externé súbory CSS predstavujú všetky moje webové stránky.