Styly

Základy stylu

Jako "styly" jsme v úvodu trochu neodborně zvali to, co se jinak nazývá "kaskádovou definicí stylů," anglicky Cascading Style Sheets, CSS. Ačkoliv by se mohlo z prvního odstavce zdát, že styly jsou tu pouze pro legraci, není tomu tak: účelem stylů je oddělit obsah dokumentu od jeho designu a zpřehlednit tak návrh html stránek. Pomocí stylů můžeme ovlivňovat, jak budou vypadat textové prvky dokumentu.

Pokud jsme bez stylů kupř. chtěli, aby se nadpisy na stránce vykreslovaly v určité barvě daným fontem o jisté velikosti, pravděpodobně jsme použili na několika místech příkazu <font> s atributy udávajícími barvu, druh a velikost fontu. Jestliže jsme chtěli první řádek nějakého odstavce odsadit o pár bodů, nezbylo, než použít několika pevných mezer ;nbsp.

Se styly může být cesta následující: html značce pro nadpis <h1> přiřadíme v definici stylu vlastnosti týkající se druhu fontu, barvy fontu, velikosti fontu, ale třeba i šířky fontu anebo barvy pozadí. Nadpisy pak stačí ohraničit pomocí <h1> a vykreslí se tak, jak je předepsáno pro tuto značku. V případě odstavců prostě v definici stylu určíme prvku pro odstavec <p>, aby se jím označené odstavce odsazovaly o námi zadaný počet bodů.

Používáme-li styly, měli bychom všechny příkazy uzavírat jejich párovými druhy s lomítkem. Je nutné uzavírat všechny příkazy, i ty, kde to doposud nebylo povinností: takže třeba každý odstavec uvodíme příkazem <p> a uzavřeme ho příkazem </p>.

Začínáme

Nejprve si ukážeme, jak určíme vlastnosti nějakého konkrétního prvku a pak si povíme, jakým způsobem zakomponujeme definici stylů do html dokumentu. Určujeme-li vlastnosti jistého textového prvku, napíšeme značku prvku spolu s předpisem pro tuto značku. Předpis uzavřeme do složených závorek. Uvnitř závorek definujeme hodnoty jednotlivých atributů, různé atributy od sebe oddělíme středníkem. V definici stylu nemusíme měnit vlastnosti úplně každého textového prvku, stačí uvést pouze ty prvky, které mají vypadat odlišně od normálu.

Takto definujeme styl např. nadpisu:

H1 {color: green;
font-family: Arial, Helvetica, sans-serif;
font-size: 28pt}

Existují čtyři způsoby, jak pomocí stylů ovlivnit vzhled dokumentu, všechny čtyři způsoby lze použít zároveň. Každý ze způsobů má určitou váhu, větší váha přebíjí menší, odtud "kaskádové styly." Uvedeme si je od menší váhy po větší:

Odkaz

Styly nadefinujeme v samostatném dokumentu s příponou .css a příkazem <link>odkážeme na tento dokument. To umožňuje použít jedinou definici stylů pro návrh celého sajtu.

Vložení

Definici stylů uvedeme přímo do dokumentu, použijeme příkazu <style>. Definice je potom platná pro tuhle jedinou stránku.

Blok

Na začátku bloku uvedeme speciální příkaz <div> (resp. <span>), blok musíme uzavřít pomocí </div> (resp. </span>).

Příkaz

Do příkazu určujícího vzhled textového prvku - třeba <font> nebo <h1> - přidáme nový atribut style.

<link>=odkaz na definici stilu

Příklad odkazu:

<head>
<link rel=stylesheet href=styly.css type="text/css">
</head>
Href= URL
URL odkazuje na soubor s definicí stylů, soubor má příponu .css.

<style>=definice stylu vložená do dokumentu

Příklad vložené definice:

<div>definice stylu pro část dokumentu

<span>

Příkazem <div> ovlivňujeme vzhled celých odstavců, příkazem <span> pouze několika slov či písmen. Na začátku bloku uvedeme <div>, na konci </div>, podobně se používá <span>.

Příklad použití viz. na konci kapitoly.

Class= text
Udává jméno třídy, která se použije pro vykreslení části dokumentu

<libovolný příkaz>szyl se uplatní jenom uvnitř příkladu

Chcete-li využít "stylových" možností formátování textu pouze v několika drobných částech dokumentu, umístěte dovnitř libovolného příkazu nový atribut Style.

Příklad s atributem Style:

<p style="background-color: green; font-family: Arial">Meloun</p>

Style= "text"
Hodnotou atributu je to, co by jinak v definici stylů bylo zapsáno ve složených závorkách: tedy další atributy, oddělené středníky. Hodnotu atributu Style uzavírejte do závorek!

Třídy

Pomocí tříd udržíme pohromadě logickou strukturu dokumentu s jeho vzhledem. Představte si, že máte FAQ stránku dotazů a odpovědí. Aby se v tom vyznal nejen čert, dotazy jsou formátované jinak, než odpovědi: vzájemně se liší barvou, odsazením... Každý dotaz nebo odpověď je jiný odstavec. Nadefinujeme si tedy dvě třídy html prvku <p>, jednu nazveme překvapivě "otazka" a druhou neméně překvapivě "odpoved:"

P.otazka {color: red ; font-style: italic}
P.odpoved {color: green ; font-weight: light}

Uvnitř html dokumentu otázky a odpovědi označíme následovně:

<p class="otazka">Proč?</p>
<p class="odpoved">Pro slepičí kvoč.</p>

Html prvek pro link <a> má navíc některé třídy předdefinované, můžete tak ovlivňovat třeba vzhled navštívených a nenavštívených linků (v následujícím příkladu jsme linkům pomocí "text-decoration: none" odstranili jejich podtržení). Všimněte si, že jméno předdefinované třídy je odděleno od názvu prvku dvojtečkou!

A:link	{text-decoration:none}	link
A:visted	{text-decoration:none}	navštívený link
A:active	{text-decoration:none}	aktivní link

Atributy

Název atributu	Popis atributu	Hodnoty atributu	Příklad použití
font-family	druh písma	název písma	{font-family: Arial}
font size	výška písma	body (pt) palce (in) centimetry (cm) pixely (px)	{font-size: 30px}
font-weight	Tloušťka písma	extra-light light demi-light medium demi-bold bold extra-bold	{font-weight: extra-bold}
line-height	Vzdálenost mezi řádky	body (pt) palce (in) centimetry (cm) pixely (px) procento (%)	{line-height: 30px}
font-style	Italica	Normal Italic	{font-style: italic}
text-decoration	Dekorace	nic: none podtržení: underline italika: italic proškrtnutí: line-through	{text-decoration: none}
color background-color	Barva textu, pozadí.	jméno barvy RGB hodnota	{background-color: blue} {color: green}
margin-left margin-right margin-top	Vzdálenost od okraje stránky.	body (pt) palce (in) centimetry (cm) pixely (px)	{margin-left: -100px}
text-align	Zarovnání textu.	nalevo: left centrovaně: center napravo: right	{text-align: center}
text-indent	Odsazení textu odleva	body (pt) palce (in) centimetry (cm) pixely (px)	{text-indent: 2cm}

Příklad použití stylů

Příklad:
<html>
<head>
<title>Příklad</title>
<style type="text/css">

</style>

</head>
<body>

<h2>Nadpisek</h2>
<p>Odstaveček a v něm <span class=zluta>žlutá <span class=modra>modrá </span>
žlutá </span> <span class=bila>bílá.</span></p>
<a href=styly_priklad.htm>Velice fikaný odkaz.</a>

</body>
</html>

Výsledek

Finta

Příklad:

<html>
<head>
<title>příklad</title>
<style  type="text/css">
<!--
BODY	{background: white;
	text-align: center;
	font-family: Comic Sans MS}

.stin 	{color: black;
	margin-top: 50px;
	font-weight: bold;
	font-size: 110px}

.abc 	{color: blue;
	margin-top: -160px;
	font-weight: bold;
	font-size: 110px}
-->
</style>
</head>
<body>
<div class=stin> abc</div>
<div class=abc>abc</div>
</body>
</html>
Výsledek

Využili jsme dědičnosti: tělu dokumentu jsme přiřadili bílé pozadí, bezpatkový font a přikázali jsme všechno centrovat doprostřed (všimněte si, jak se značí komentář) - tyhle vlastnosti zdědí od těla dokumentu všechny další html prvky. Nadefinovali jsme dvě třídy pro textové prvky, třídy se liší barvou písma, atribut "margin-top" jsme použili k efektu vystínování. Modré "abc" by se normálně vypsalo na nový řádek, ale protože jsme ho záporně odsadili od horního okraje, posune se směrem nahoru a přepíše černé "abc", které tvoří stín.