Co je externí šablona stylů?

Externí šablona stylů definuje, jak webová stránka vypadá. Pomocí šablony stylů můžete určit věci, jako je velikost, barva a písmo textu, barva tlačítek nebo umístění nabídek a postranních panelů.

Kód použitý v externí šabloně stylů

K vytvoření základní webové stránky se používají dva typy kódu:

• Hyper Text Markup Language (HTML): Definuje obsah webové stránky. Obsahuje skutečný text se značkou, která identifikuje, zda jsou části textu odstavce, nadpisy nebo seznamy. Obsahuje také odkazy na obrázky, které se objevují na stránce, a hypertextové odkazy na externí stránky.
• Kaskádové styly (CSS): Kódovací jazyk používaný k určení způsobu zobrazení obsahu. Definuje, jak je zobrazen každý typ textového prvku, a může zobrazit stejný typ prvku odlišně, pokud patří do různých tříd nebo mají jiné ID. To umožňuje, aby se věci jako nabídky a seznamy v hlavním textu webové stránky chovaly velmi odlišně.

Obecně je oddělení stylu od obsahu dobrý nápad, protože umožňuje soustředit se na jednu věc najednou. V týmu se to stává ještě důležitějším, což umožňuje specialistům na obsah a prezentaci pracovat nezávisle na ostatních. Snad ještě důležitější je, že také umožňuje jednotné použití jedné sady instrukcí stylu na celém webu.

Vizuální prezentaci webu lze poté změnit z jedné šablony stylů, aniž byste museli každou webovou stránku upravovat samostatně. U větších komplexních webů lze k ovládání textu, nabídek a rozdělení na stránkách použít několik šablon stylů. Tuto kolekci stylů lze nazvat „tématem“.

Použití externího CSS k propojení HTML s CSS

Je možné zahrnout styl CSS přímo do HTML webové stránky pomocí CSS k individuálnímu stylu každého odstavce a nadpisu jinak. Tento typ inline styling obecně to není dobrý nápad, protože ztratíte všechny výhody oddělení stylu od obsahu. Zejména ztrácíte schopnost důsledně aktualizovat celý svůj web z jednoho souboru.

Správným způsobem, jak použít styl na web, je vytvořit jeden externí soubor šablony stylů pro každý typ stylu, který chcete použít, a poté na tyto soubory odkazovat ze všech souborů HTML. Můžete mít například následující externí šablony stylů:

• text.css
• menus.css
• layout.css

V těchto externích šablonách stylů můžete provádět změny v kódu CSS beze změny názvy souborů, což znamená odkazy na tyto soubory v rámci HTML všech vašich webových stránek, nebudou změněno.

Příklady HTML a CSS

Velmi jednoduchá stránka HTML může obsahovat následující kód:

 Vše o mně!

Tato stránka je o mně a proč jsem úžasný.

Jednoduchou externí šablonu stylů lze propojit s touto stránkou přidáním následujícího kódu pod.

type = "text / css"
href = "myStyle.css" />

Vytvořte další textový soubor s názvem myStyle.css umístěný ve stejné složce jako index.html, který obsahuje následující kód:

h1 {
barva: # FF7643;
font-face: Arial '
}
p {
červená barva;
velikost písma: 1,5 em;
}