rychlokurs HTML

Styly

Až se vám načte do browseru stránka, na které jsou hyperlinky bez (dříve) obvyklého podtržítka, jedná se s největší pravděpodobností o stránku vylepšenou pomocí stylů a vy si ji prohlížíte Microsoft Internet Explorerem verze 3 a vyšší nebo Netscape Navigatorem verze 4.

Tohle samozřejmě není jediná legrácka, která se dá pomocí stylů zařídit: cachí se vám už mohla mihnout slova zvýrazněná odlišnou barvou pozadí a to prosím v souvislém textu. Ty nejdivočejší kejkle, které jdou se styly provádět, naleznete na stránkách Microsoftu - s použitím stylů vyrenderujete nápisy se stíny vlevo i vpravo, nahoře, dole, tisícovkou různých fontů a na vašich stránkách tak nahradíte několikakilobajtové obrázky.


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 stylů

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:

    <html>

    <style type="text/css">
    <!--

    -->
    </style>

    <body>

    </body>
    </html>

<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> styl se uplatní jenom uvnitř příkazu

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!


Atributy stylu

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 Italika. normal
italic
{font-style: italic}
text-decoration Podtržení a spol. 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}

První příklad použití stylů

Pokusíme se osvětlit si práci se styly velmi zhruba na následujícím příkladu. Podívejte, co je jeho výsledkem (otevře se vám nové okno).

Definiční soubor styly_pr.html:

    <html>
    <head>

    <style type="text/css">
    <!--
    BODY     {background-color: #aaaaaa}
    H2       {text-align: right;
             background-color: yellow;
             font-family: Arial, helvetica, sans-serif}
    P        {text-align: center;
             font-family: "Arial Black", helvetica, sans-serif}
    A:link   {text-decoration: none;
             font-size: 48px;
             color: green}
    .cervena {background-color: red}
    .modra   {background-color: blue}
    -->
    </style>

    </head>
    <body>

    <h2>Nadpisek</h2>
    <p>Odstaveček a v něm <span class=cervena>červená
    <span class=modra>modrá</span>
    červená</span> bílá.</p>
    <a href=styly.html>Velice fikaný odkaz.</a>

    </body>
    </html>

Použili jsme definice uvnitř dokumentu pomocí příkazu <style>, pro browsery, které se styly neumí pracovat, je nutné uzavřít definici stylu značkami pro komentář. Nadefinovali jsme, jak budou jednotlivé textové prvky vypadat, všimněte si, že jsme tělu dokumentu přřadili šedivou barvu pozadí. Atributy jsou samodokumentující se, jejich co možná nejúplnější výčet uvedeme příště. Všimněte si, že odstavec se vykreslí na šedém pozadí, zatímco slova "červená" a "modrá" na pozadí příslušné barvy - kaskádovitost.


Finta se styly

Jedním z argumentů pro používání stylů bylo, že styly mohou nahradit jednoduchou ozdobnou grafiku. Jak se vám zamlouvá třeba násedující stínovaný nadpis? Pomocí malého triku ho vykreslíme hravě...

Definiční soubor styly_pr2.html:

    
    <html>
    
    
    
    <head>
    
    <style  type="text/css">
    
    <!--
    
    BODY	{background: white;
    
    	text-align: center; 		/* vsechno bude centrovane*/
    
    	font-family: Arial, helvetica, sans-serif}
    
    
    
    .stin 	{color: darkgreen;
    
    	margin-top: 50px;
    
    	font-weight: bold;
    
    	font-size: 100px}
    
    
    
    .abc 	{color: lightgreen;
    
    	margin-top: -115px;
    
    	font-weight: bold;
    
    	font-size: 110px}
    
    
    
    .de 	{color: gray;
    
    	margin-top: -90px;
    
    	font-weight: extra-light;
    
    	font-size: 110px; 
    
    	line-height: 90px}
    
    -->
    
    </style>
    
    </head>
    
    
    
    <body>
    
    
    
    <div class=stin>abc</div>
    
    <div class=abc>abc</div>
    
    <div class=de>d<br>e</div>
    
    
    
    </body>
    
    
    
    </html>
    
    
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 tři třídy pro textové prvky, třídy se liší velikostí a barvou písma, atribut "margin-top" jsme použili k efektu vystínování. Světle zelené "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 tmavozelené "abc," které tvoří stín. Stejným způsobem jsou nahoru posunuta i písmena "de."
Pavel Pospíšil