CSS > Připojení CSS k HTML

Připojení CSS k HTML

V předchozí kapitole jsme si řekli, co CSS vlastně je a nyní si ukážeme, jak ho propojit s HTML dokumentem.

Na schématu jsme si také ukázali, jak spolu HTML a CSS soubory komunikují, jedná se ale pouze o jeden možný způsob propojení, avšak nejpoužívanější. Přemýšlel jsem, zda před způsoby propojení HTML a CSS zařadit pravidla zápisu CSS vlastností. Nakonec jsem volil jako první právě tuto kapitolu. Přestože ještě nevíme, jak se CSS vlastnosti zapisují a co která znamená, můžeme již zde mnohé odtušit a následující kapitola se nám tak bude studovat o to snadněji.

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>

Nadpis druhé úrovně

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

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

Nadpis druhé úrovně

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>

Nadpis druhé úrovně


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á.


Dále:

Zápis CSS

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist