Jak na CSS
Kaskádové styly patří k modernějšímu způsobu formátování stránek. Pomocí nich můžeme ovlivnit vlastnosti všech značek html i xhtml dokumentu. Největší význam kaskádových stylů je v tom, že jsou uloženy v samostatném souboru s příponou .css a k vlastnímu dokumentu se připojují. Vlastnosti značek se načtou z tohoto vnějšího souboru.
Výhoda je zřejmá - vlastní dokument obsahuje minimální počet formátovacích informací, a proto je datově menší. Díky tomu se také rychleji načte. V případě použití zastaralého prohlížeče, který kaskádové styly nepodporuje, se načtou "neupravené" informace. To je důležité, protože i když příjdeme o designerské zpracování webové stránky, vlastní informace se nám neztratí.
Vazba na XHTML dokument
Stylový formát je nutné k dokumentu připojit. To je možné udělat několika způsoby,
v každém z nich vkládáme prvek přímo do hlavičky (element "head").
Zde uvádím tři z nich:
A) pomocí prvku link - pro připojení externího souboru
B) pomocí prvku style - předpis může být vložen přímo do dokumentu
C) pomocí pravidla @import - umožňuje načtení předpisu z externího souboru i prostřednictvím
prvku "style".
Prvek "link"
<link rel="stylesheet" type="text/css" href="styl.css />
Prvek "style"
<style type="text/css">
body {font-family: Verdana, Helvetica}
</style>
Pravidlo "@import"
<style type="text/css">
@import "css/styl.css";
</style>
Doporučuji používat třetí způsob, který je vhodný pro starší prohlížeče: pokud není kaskádový styl podporován, na zobrazení dat to nemá vliv. Pokud nebude připojen kaskádový styl správně, nebo jej prohlížeč nebude podporovat, uvidíte pouze stránku s informacemi.
Jednoduché příklady
Několik motivačních příkladů využití kaskádových stylů. Ty jsou načteny z externích souborů, což znamená, že stačí minimální změna a design je jiný. Podstatné je, že vlastní velikost stránky je pořád stejná.
Jak na css (1)
Jak na css (2)
Jak na css (3)
Jak na css (4)
Struktura stylového předpisu
Stylový předpis se skládá z posloupnosti definic. Ty budou pro nás souborem pravidel, která začínají selektorem. Za ním jsou uvedeny ve složených závorkách deklarace. Ty se skládají z vlastnosti a hodnoty, odděleny jsou dvojtečkou.
Klíčová slova - píšeme je vždy bez uvozovek
width: auto;
font-family: arial;
background: #000000;
Deklarace
Deklarace se skládá z vlastnosti a její hodnoty. Více hodnot je možné sdružovat
do jedné deklarace:
h1 {color: #cc0000; font-size: 140%; font-weight: bold; font-stretch: wider}
h2 {font-size: 100%; font-weight: bold}.
Hodnoty
Hodnoty jsou definovány pro jednotlivé vlastnosti, jsou závislé na typu hodnot. Důležitým pravidlem, zejména u velikosti textu, je zadávání relativních hodnot. To znamená, že např. velikost písma se nepíše v pixelech ale v procentech nebo poměru. Potom se přizpůsobuje nastavení textu v prohlížeči.
Třídy elementů a identifikátory
Třídy elementů používáme tehdy, jestliže potřebujeme některý styl pozměnit, např. jinou barvou textu. Pomocí tříd jsou například řazeny obrázky do tabulky, přestože vlastní tabulku vůbec nedefinujeme. Také je používáme, když se vlastnost ve stránce opakuje.
Identifikátor použijeme tehdy, jestliže chceme nastavit vlastnosti určité části dokumentu, např. levý a pravý sloupec stránky nebo zápatí. Identifikátor je ve stránce pouze jednou.
Pseudotřídy
Speciální selektory, pro které není žádná značka. Používáme je například pro formát odkazů.
Připojení třídy v dokumentu
<div class="thumbnail">
<img src="images/leseni.jpg" width="250" height="200" alt="Lešení" /></div>
Definice třídy v kaskádovém stylu
div.thumbnail {float: left; width: 260px; height: 220px;}
Připojení identifikátoru v dokumentu
<div id="footer">
<p>Obsah dokumentu</p>
</div>
Definice identifikátoru v kaskádovém stylu
#footer {background: #000000; font-size: 90%; text-align: center;}
Pseudotřídy
a:link { color: #800ccc; text-decoration: none}
a:visited {color: #800ccc; text-decoration: none}
a:hover {background: #800ccc; color: #ffffff; text-decoration: none}
Značka div se používá pro selekci tzv. následníka. Pomáhá nám při správném rozložení struktury dokumentu. Na formát dokumentu ale nemá žádný vliv.