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; 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ší:
|
<link> odkaz na definici stylů |
Příklad odkazu:
<head> Href= URL
|
<style> definice stylu vložená do dokumentu |
Příklad vložené definice:
<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
|
<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"
|
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} Uvnitř html dokumentu otázky a odpovědi označíme následovně:
<p class="otazka">Proč?</p> |
A:link |
{text-decoration: none} | link |
A:visted |
{text-decoration: none} | navštívený link |
A:active |
{text-decoration: none} | aktivní link |
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> 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 |