Výhody a nevýhody inline štýlov v CSS

CSS alebo kaskádové štýly sú to, čo sa používa v modernom dizajne webových stránok na použitie vizuálneho vzhľadu na stránku. Zatiaľ čo HTML vytvára štruktúru stránky a Javascript zvládne správanie, vzhľad a pocit webovej stránky je doménou CSS. Pokiaľ ide o tieto štýly, najčastejšie sa používajú pomocou externých štýlov, ale môžete tiež použiť štýly CSS na jeden konkrétny prvok pomocou takzvaných "inline styles".

Inline štýly sú štýly CSS, ktoré sa používajú priamo v HTML stránke. Existujú výhody a nevýhody tohto prístupu. Najprv sa pozrime na to, ako sú tieto štýly napísané.

Ako napísať inline štýl

Ak chcete vytvoriť inline štýl CSS, začnete písať svoj vlastnosť štýlu podobne ako v štýle štýlov, ale musí to byť všetok jeden riadok. Oddeľte viaceré vlastnosti bodkočiarkou rovnako ako v štýle šablón.

background: #ccc; Farba: #fff; okraj: pevná čierna 1px;

Umiestnite túto sadu štýlov do atribútu štýlu prvku, ktorý chcete štýlovať. Ak by ste napríklad chceli tento štýl aplikovať na odsek vo vašom HTML, tento prvok by vyzeral takto:

V tomto príklade by sa tento konkrétny odsek objavil s svetlo sivým pozadím (to by znamenalo #ccc), čiernym textom (z # 000 farieb) as pevným čiernym okrajom s 1 pixelom okolo všetkých štyroch strán odseku ,

Výhody inline štýlov

Vďaka kaskáde kaskádových štýlov Inline štýly majú v dokumente najvyššiu prioritu alebo špecifickosť. To znamená, že sa budú používať bez ohľadu na to, čo je inak určené vo vašom externom šablóne štýlov (s jedinou výnimkou sú všetky štýly, ktoré dostali dôležitú deklaráciu toho listu, ale to nie je niečo, čo by sa malo robiť vo výrobných prevádzkach, ak sa dá vyhnúť).

Jediné štýly, ktoré majú vyššiu prioritu ako inline štýly, sú štýly používateľov, ktoré používajú samotní čitatelia. Ak máte problémy s uplatnením zmien, môžete vyskúšať nastavenie inline štýlu na prvok. Ak sa štýly stále nezobrazujú pomocou inline štýlu, viete, že sa deje niečo iné.

Inline štýly sa jednoducho a rýchlo pridávajú a nemusíte sa obávať písania správneho výberu CSS, pretože pridávate štýly priamo k prvku, ktorý chcete zmeniť (tento prvok v podstate nahrádza volič, ktorý by ste napísali do externého štýlu ). Nemusíte vytvárať úplne nový dokument (rovnako ako pri externých štýloch) alebo upravovať nový prvok v hlavičke dokumentu (ako pri interných štýloch). Stačí pridať atribút štýlu, ktorý je platný takmer pre každý prvok HTML. To sú všetky dôvody, prečo môžete byť v pokušení používať inline štýly, ale musíte si byť vedomí aj niektorých veľmi významných nevýhod tohto prístupu.

Nevýhody inline štýlov

Vzhľadom k tomu, že inline štýly sú najznámejšie v kaskáde, môžu prekonať veci, ktoré ste nemali v úmysle. Tiež negujú jeden z najsilnejších aspektov CSS - schopnosť štýlovať veľa webových stránok z jedného centrálneho súboru CSS, aby boli budúce aktualizácie a zmeny štýlu oveľa jednoduchšie spravovať.

Ak ste mali používať len inline štýly, vaše dokumenty by sa rýchlo nafúkli a veľmi ťažko sa udržiavali. Je to preto, lebo inline štýly musia byť aplikované na každý prvok, na ktorom ich chcete. Ak chcete, aby všetky vaše odseky mali rodinu písiem "Arial", musíte do dokumentu vložiť inline štýl každej značke

. Tým sa pridávajú obidve práce na údržbe pre návrhárov a čas na preberanie pre čitateľa, pretože by ste to museli zmeniť na každej stránke na vašom webe, aby ste zmenili rodinu fontov. Prípadne, ak používate samostatnú šablónu so štýlmi, môžete ju zmeniť na jednom mieste a každá stránka dostane túto aktualizáciu.

Je pravda, že ide o krok späť v dizajne webu - späť dni tagu !