Jak vložit kaskádový styl do HTML

19. 11. 2007 / 23:55 — 607 shlédnutí
V kategorii layout

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" />