Výhody a nevýhody inline stylů v CSS

CSS nebo kaskádové styly jsou to, co se v moderním designu webových stránek používá k aplikaci vizuálního vzhledu na stránku. Zatímco HTML vytváří strukturu stránky a Javascript zvládne chování, vzhled a pocit z webových stránek je doménou CSS. Pokud jde o tyto styly, nejčastěji se používají s použitím externích stylových listů, ale můžete použít i styly CSS na jediný, specifický prvek pomocí takzvaných inline stylů.

Inline styly jsou styly CSS, které jsou aplikovány přímo v HTML stránce. Existují výhody i nevýhody tohoto přístupu. Za prvé, podívejme se přesně na to, jak jsou tyto styly psány.

Jak psát inline styl

Chcete-li vytvořit styl inline CSS, začněte psaním vlastností stylu podobně jako ve stylu, ale musí to být celý jeden řádek. Oddělte více vlastností středníkem, stejně jako v listu stylů.

pozadí: #ccc; barva: #fff; hranice: solidní černá 1px;

Umístěte tuto řadu stylů do atributu styl prvku, který chcete stylovat. Pokud byste například chtěli použít tento styl k odstavci ve vašem HTML, tento prvek by vypadal takto:

V tomto příkladu by se tento konkrétní odstavec objevil s světle šedým pozadím (to by znamenalo # ccc), černým textem (od # 000 barvy) as 1-pixelovým pevným černým okrajem kolem všech čtyř stran odstavce .

Výhody inline stylů

Díky kaskádě kaskádového stylu Inline styly mají nejvyšší prioritu nebo specifičnost v dokumentu. To znamená, že budou použity bez ohledu na to, co je dané ve vašem externím stylu (s výjimkou všech stylů, které jsou uvedeny v důležitém prohlášení, ale to není něco, co by se mělo dělat na výrobních místech, je možné se vyhnout).

Jediné styly, které mají vyšší prioritu než inline styly, jsou uživatelské styly používané samotnými čtenáři. Pokud máte potíže s aplikací změn, můžete zkusit na prvku nastavit inline styl. Pokud se styly stále nezobrazují pomocí inline stylu, víte, že se děje něco jiného.

Inline styly jsou snadno a rychle přidány a nemusíte se starat o psaní správného výběru CSS, protože přidáváte styly přímo na prvek, který chcete změnit (tento prvek v podstatě nahrazuje volič, který byste psali do externího stylu ). Nemusíte vytvářet úplně nový dokument (jako u externích stylových listů) nebo upravovat nový prvek v hlavičce dokumentu (jako u interních stylů). Právě přidáte atribut stylu, který je platný téměř na všech prvcích HTML. To jsou všechny důvody, proč můžete být v pokušení použít inline styly, ale musíte si také být vědomi některých velmi významných nevýhod tohoto přístupu.

Nevýhody inline stylů

Protože inline styly jsou nejvíce specifické v kaskádě, mohou překonat věci, které jste neměli v úmyslu. Oni také popírají jeden z nejsilnějších aspektů CSS - schopnost stylovat hodně a spoustu webových stránek z jednoho centrálního souboru CSS, aby se budoucí aktualizace a změny stylů mnohem lépe spravovaly.

Pokud jste museli používat pouze inline styly, vaše dokumenty by se rychle nafoukly a bylo velmi těžké je udržet. Je tomu tak proto, že všechny elementy, které je chcete používat, musí být použity pro inline styly. Pokud tedy chcete, aby všechny odstavce měly rodinu písma "Arial", musíte do dokumentu vkládat inline styl do každé značky

. To přidává jak práci s údržbou pro návrháře, tak i čas stahování pro čtenáře, protože byste jej měli změnit na každé stránce vašeho webu, abyste změnili rodinu písma. Případně, pokud použijete samostatnou tabulku stylů, můžete ji změnit na jednom místě a každou stránku obdržet tuto aktualizaci.

Je pravda, že jde o krok zpět v návrhu webových stránek - zpět na dny značky !