Inline, embedded a externí stylové listy: Zde je to, co potřebujete vědět
Vývoj webových stránek na frontě je často reprezentován jako 3-nožní stolička. Tyto nohy jsou následující:
Druhá část této stoličky, CSS nebo kaskádové styly, je to, co zde dnes hledíme. Konkrétně se chceme zabývat třemi typy stylů, které můžete přidat do dokumentu.
- Inline styly
- Vestavěné styly
- Externí styly
Každý z těchto stylů CSS má své výhody a nevýhody, takže se podívejme hlouběji na každou z nich individuálně.
Inline styly
Inline styly jsou styly, které jsou zapsány přímo do tagu v dokumentu HTML. Inline styly ovlivňují pouze konkrétní značku, na kterou jsou aplikovány. Zde je příklad inline stylu aplikovaného na standardní odkaz nebo kotevní tag:
Toto pravidlo CSS by z tohoto odkazu změnilo standardní zdůraznění textu. Nicméně na stránce nezmění žádný jiný odkaz. Toto je jedno z omezení inline stylů. Vzhledem k tomu, že se mění pouze na určitou položku, je třeba, abyste si s těmito styly vylepili kód HTML, abyste dosáhli skutečného návrhu stránky. To není nejlepší postup. Ve skutečnosti je to jeden krok odstraněno ze dnů tagů "font" a směsí struktury a stylu na webových stránkách.
Inline styly mají také velmi vysokou specifičnost.
Díky tomu je velmi obtížné přepsat jiné styly, které nejsou inline. Například pokud chcete, aby web reagoval a změnil, jaký prvek se dívá na určité hraniční body pomocí mediálních dotazů , vložené styly na prvek způsobí, že je to velmi těžké.
Nakonec jsou inline styly skutečně vhodné pouze tehdy, když se používají velmi šetrně.
Ve skutečnosti jsem zřídkakdy na svých webových stránkách používal inline styly.
Vestavěné styly
Vestavěné styly jsou styly, které jsou vloženy do hlavy dokumentu. Vestavěné styly ovlivňují pouze značky na stránce, do které jsou vloženy. Tento přístup opět odmítá jednu ze silných stránek CSS. Protože každá stránka by měla ve stylu
, pokud byste chtěli provést celopodnikovou změnu, jako je změna barvy odkazů z červené na zelenou, budete muset provést tuto změnu na každé stránce, protože každá stránka používá vložený stylový list. To je lepší než inline styly, ale v mnoha případech je stále problematické.
Styly, které jsou přidány do souboru
dokumentu přidává na tuto stránku značné množství značkovacího kódu, což může v budoucnu také ztížit správu stránky.
Výhodou vložených stylových listů je, že zátěž bezprostředně se samotnou stránkou namísto požadavku na načtení jiných externích souborů. To může být přínosem z pohledu rychlosti stahování a výkonu .
Externí stylové listy
Většina webových stránek dnes používá externí stylové listy. Externí styly jsou styly, které jsou napsány v samostatném dokumentu a pak jsou připojeny k různým dokumentům. Externí stylové listy mohou ovlivnit jakýkoli dokument, ke kterému jsou připojeny, což znamená, že pokud máte 20 stránek, kde každá stránka používá stejný stylový list (obvykle se to dělá), můžete vizuálně změnit každou stránku těchto stránek jednoduše upravte stylový list.
To dělá dlouhodobé řízení stránek mnohem jednodušší.
Nevýhodou pro externí stylové listy je to, že vyžadují stránky k načtení a načtení těchto externích souborů. Ne každá stránka bude používat každý styl v listu CSS, takže mnoho stránek načte mnohem větší stránku CSS, než skutečně potřebuje.
Zatímco je pravda, že existuje výkonný výsledek pro externí soubory CSS, může být určitě minimalizován. Realisticky jsou soubory CSS jen textové soubory, takže obvykle nejsou příliš velké. Pokud celá vaše stránka používá 1 soubor CSS, získáváte také užitek, že je tento dokument po uložení do mezipaměti uložen do mezipaměti.
To znamená, že na první stránce může dojít k mírnému výkonu některých návštěv, ale následné stránky budou používat soubor CSS uložený v mezipaměti, takže jakýkoli hit by byl vyloučen. Externí soubory CSS tvoří způsob, jakým budu vytvářet všechny mé webové stránky.