Jak vložit kaskádový styl do HTML

V současné době upadá období anarchie tvorby webových stránek a snad všichni tvůrci se snaží dodržovat nějaká pravidla tvorby správného webu. Odměnou za tuto snahu je například lepší ohodnocení stránek vyhledávacími roboty a následné lepší umístění ve vyhledávačích. Hlavním pravidlem je oddělení obsahu od vzhledu.

O obsah se tedy má starat HTML (tagy pouze označují o jaký typ obsahu se jedná – např. tag <p> označuje text jako odstavec) a o vzhled se stará CSS. Pomocí CSS tedy řeknete prohlížeči, že má v odstavci definoveném pomocí HTML použít určitý druh písma. CSS lze do html dokumentu vložit víceméně třemi způsoby.

Přímé nastylování prvku v HTML

Méně používaný způsob, který ale má své použití. Hodí se o něm vědět například v souvislosti s akcemi poháněnými javascriptem. Možná najdete i jiné případy, kdy je vhodné ho použít.

Do HTML kódu přímo do tagu, který chceme ostylovat připíšeme style=““ a do něj můžeme vložit celou definici vzhledu.

...
<p style="font-size: 90%;">Tento text bude menší.</p>
...

CSS zapsané v HTML dokumentu

Celý soubor stylů lze mimojiné také zapsat na počátku HTML souboru. Do hlavičky dokumentu umístíme tagy <style></style> a mezi ně opět zapíšeme definici stylů. Obdobným příklad tímto způsobem s nastylováním barvy nadpisu první úrovně navíc následuje.

...
<head>
	<title>stylovaný dokument</title>
	<style>
 		p {
			text-size: 90%;
		}
		h1 {
			color: green;
		}
	</style>
</head>
<body>
	<h1>zelený nadpis</h1>
	<p>a zase menší text</p>
...

Externí soubor se styly

Asi nejpoužívanějším řešením je externí soubor se styly. Oproti předchozímu řešení je výsledek přehlednější. Styl v externím souboru se navíc většinou ukládá do cache prohlížečů, takže se nenačítá opakovaně. Je také snazší (nebo spíš přehlednější) stejný stylem nastylovat více HTML souborů. A jak na to? Nejprve si vytvoříme zvláštní textový soubor, který pojmenujeme například style.css. Do něj zapíšeme víceméne to samé co v minulém příkladu:

p {
	text-size: 90%;
}
h1 {
	color: green;
}

Nyní si vytvoříme HTML soubor a v hlavičce externí soubor načteme pomocí tagu <link>.

...
<head>
	<title>dokument nastylovaný externím souborem</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Opět zelený nadpis</h1>
	<p>A zase jeden zmenšený text</p>
...

Uvedený příklad předpokládá, že soubor se styly i HTML soubor se nacházejí v jedné složce. Pokud soubor se styly umístíte jinam, je nutné adekvátně upravit cestu v tagu <link>. Pokud píšete stránky v XHTML, pozor na validitu! Tag <link> není párový, zapište jej tedy:

 <link rel="stylesheet" type="text/css" href="style.css" />

One Reply to “Jak vložit kaskádový styl do HTML”

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *