Připojení CSS k HTML

Způsoby připojení CSS k HTML

1. Přímé připojení stylu k prvku HTML

Dělá se tak pomocí atributu style. Ukážeme si na příkladu:
Nejprve zapíšeme zápis pro neostylovaný nadpis druhé úrovně. To je pro nás už hračka.

<h2>Nadpis druhé úrovně</h2>

Nyní si ho ostylujeme pomocí atributu style, určité vlastnosti a její hodnoty.

<h2 style=“color: green;“>Nadpis druhé úrovně</h2>

Pozn.: U noční verze webu má nadpis přidáno světlé pozadí, kvůli lepší čitelnosti.

Na konci zápisu není nutné středník psát. Pokud ale chceme nějakou vlastnost přidat, středník je důležitý k jejímu oddělení. Je tedy lepší psát středník i na konci, abychom ho potom nezapomněli dopsat, když nějakou vlastnost přidáme.

Následující zápis ukazuje více vlastností zapsaných najednou:

<h2 style=“color: blue; letter-spacing: 3px; background-color: pink;“>Nadpis druhé úrovně</h2>

2. Vložení CSS zápisu do HTML dokumentu

Vkládá se do hlavičky (mezi <head> </head>) mezi <style type=“text/css“> </style>.
Pokud vás předchozí věta troche zmátla, příklad to napraví:

<head>
<style type=“text/css“>
  h2 { color: green; letter-spacing: 3px; background-color: pink; }
</style>
</head>

Atribut type říká, že se jedná o kaskádové styly.

3. Připojení externího CSS k HTML souboru

Na schématu jsme si naznačili, že externí CSS soubor je k HTML připojen pomocí speciálního odkazu. Ten může být buď ve tvaru:

<link rel=“stylesheet“ type=“text/css“ href=“css/styl.css“>

Atribut rel s klíčovým slovem stylesheet prohlížeči říká, jak má CSS dokument použít – jako kód, který určuje vzhled HTML dokumentu. V href je potom cesta k CSS souboru.

Nebo můžeme použít tento zápis:

<style type=“text/css“>@import url(„css/styl.css“);</style>

Oba zápisy se opět se vkládají do hlavičky (mezi <head> </head>).

První zápis se pak používá častěji a funguje snad ve všech prohlížečích. Druhý zápis lze pak napsat více způsoby, odlišnosti jsou však drobné. Přesto rozhodují o tom, ve kterém prohlížeči to bude či nebude fungovat. Většinou se jedná o obstarožní prohlížeče, avšak například:

<style type=“text/css“>@import url(css/styl.css) screen;</style>

nám nepojede v IE, proto doporučuji využívat vždy první zápis.

Který způsob použít

Záležín na situaci. První způsob však není příliš praktický. Znepřehledňuje HTML kód a pokud máme více HTML souborů a v každém bychom chtěli mít modrý odstavec, musíme přiřadit styl k danému odstavci v každém souboru zvlášť. Co když máme těch soborů třeba padesát? A co když chceme pak místo modrého odstavce mít zelený? Pokud si odpovíme na tyto otázky, zjistíme, jaké nevýhody takový zápis stylů přináší. Tento způsob použijeme třeba, pokud chceme dopilovat konkrétní úsek HTML kódu na jedné stánce; využití však není příliš časté.

Druhý způsob – často výhodný, pokud je náš web tvořen jen jedním HTML souborem. Nemusíme tak tvořit další soubor.

Třetí způsob – Pokud máme web tvořen více HTML soubory, tak jediný možný, pokud se nechceme zbláznit. V hlavičce každé HTML stránky máme odkaz na jediný CSS soubor, který se stará o vzhled celého webu. Změna jednoho CSS souboru se potom projeví na všech stránkách; údržba je tak rychlá a pohodlná.

Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Třídy a identifikátory Zápis CSS Div a span Co je CSS