Tri typy štýlov CSS

Vývoj webových stránok typu front-end sa často predstavuje ako trojnohá stolička, ktorá obsahuje:

• HTML pre štruktúru stránky
• CSS pre vizuálne štýly
• Javascript pre správanie

Druhá noha tejto stoličky, kaskádové štýly, podporuje tri rôzne štýly, ktoré môžete pridať do dokumentu.

1. Vložené štýly
2. Vložené štýly
3. Externé štýly

Každý z týchto štýlov CSS predstavuje jedinečné výhody a nevýhody.

Vložené štýly

Vložené štýly sú štýly, ktoré sa zapisujú priamo do značky v dokumente HTML. Vložené štýly ovplyvňujú iba konkrétnu značku, na ktorú sú použité:

Toto pravidlo CSS deaktivuje štandardné zdobenie textu podčiarknutia pre tento jeden odkaz. Nezmení by to však žiadny ďalší odkaz na stránke. Toto je jedno z obmedzení vložených štýlov. Pretože sa menia iba na konkrétnej položke, na dosiahnutie jednotného vzhľadu stránky budete musieť vrhnúť svoj HTML na tieto štýly. Toto nie je najlepší postup: V skutočnosti je to jeden krok odstránený z doby písmo tagy a prímes štruktúry a štýlu na webových stránkach.

Inline štýly tiež vyžadujú veľmi vysokú špecifickosť. To sťažuje ich prepisovanie inými, nie vloženými štýlmi. Napríklad ak chcete, aby stránka reagovala a zmenila spôsob, akým element vyzerá na určité zarážky, pomocou mediálne dotazy, vložené štýly na prvku to sťažujú.

Vložené štýly sú vhodné, iba ak ich používate šetrne, v prístupe „výnimka z pravidla“, ktorý nastaví jeden alebo dva prvky od svojich vrstovníkov na stránke.

Vložené štýly

Vložené štýly sa nachádzajú v záhlaví dokumentu. Sú uzavreté tagy a vyzerajú podobne ako externé súbory CSS v tejto časti dokumentu.

Vložené štýly ovplyvňujú iba značky na stránke, do ktorej sú vložené. Tento prístup opäť popiera jednu zo silných stránok CSS. Pretože každá stránka obsahuje štýly definované v hlavičke, mali by ste urobiť zmenu na celom webe - napríklad zmeniť farbu odkazov z červenej na zelenú - túto zmenu by ste museli urobiť na každej stránke, pretože každá stránka používa vložený štýl list. Tento prístup je lepší ako vložené štýly, ale v mnohých prípadoch je stále problematický.

Šablóny štýlov, ktoré sa pridávajú do hlavičky dokumentu, tiež na túto stránku pridávajú značné množstvo značkovacieho kódu, čo tiež môže v budúcnosti sťažiť správu stránky.

Výhodou vložených šablón štýlov je, že sa načítajú okamžite so stránkou samotnou, namiesto toho, aby sa načítali ďalšie externé súbory. Táto technika môže byť výhodou z hľadiska rýchlosti a výkonu sťahovania.

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 pripojené k rôznym webovým dokumentom. Volajú sa do hlavného dokumentu pomocou a značka v záhlaví dokumentu. Externé šablóny štýlov môžu byť umiestnené na rovnakom serveri ako HTML, alebo ich je možné úplne stiahnuť z iného servera. To sa často stáva v prípade podkladov, ako sú písma, ktoré si veľa stránok požičiava od spoločnosti Google.

Externé štýly ovplyvní akýkoľvek dokument, ku ktorému sú pripojené, čo znamená, že ak máte 20-stranový web, kde každá stránka používa rovnakú šablónu so štýlmi (zvyčajne sa to robí takto) môžete vizuálne zmeniť každú z týchto stránok jednoduchou úpravou tohto jedného štýlu list. Táto ekonomika výrazne uľahčuje dlhodobú správu stránok.

Nevýhodou externých štýlov je, že vyžadujú stránky, aby tieto externé súbory načítali a načítali. Nie každá stránka použije každý štýl v hárku CSS, takže veľa stránok načíta oveľa väčšiu stránku CSS, ako tá, ktorú skutočne potrebuje.

Aj keď je pravda, že u externých súborov CSS existuje výkonnostný zásah, dá sa určite minimalizovať. Realisticky sú súbory CSS iba textové súbory, takže na začiatok nie sú veľké. Ak celá vaša stránka používa jeden súbor CSS, získate výhodu aj toho, že sa tento dokument uloží do vyrovnávacej pamäte po prvom načítaní, čo znamená, že pri niektorých návštevách môže byť na prvej stránke mierny zásah do výkonu, ale nasledujúce stránky budú používať súbor CSS vo vyrovnávacej pamäti, takže akýkoľvek zásah by bol negovaný.