tento text je rozdělen na následující části: |
Základy stylu |
Začínáme |
<link> |
<style> |
<div> |
<span> |
<libovolný příkaz> |
Třídy |
Atributy |
Příklad použití stylů |
Finta |
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 stilu |
||||||||||||||||||||||||||||||||||||||||||||
Příklad odkazu: <head> |
||||||||||||||||||||||||||||||||||||||||||||
<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>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" |
||||||||||||||||||||||||||||||||||||||||||||
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> 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 |
||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||
Příklad použití stylů |
||||||||||||||||||||||||||||||||||||||||||||
Příklad: <html> <head> <title>Příklad</title> <style type="text/css"> <!-- BODY {background-color: aqua} H2 {text-align: right; background-color: blue; font-family: Comic Sans MS} P {text-align: center; font-family: "Courier New CE, sans-serif"; font weight: bold} A:link {text-decoration: none; font-size: 48px; color: green} .zluta {background-color: yellow} .modra {background-color: blue} .bila {background-color: white} --> </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> |
||||||||||||||||||||||||||||||||||||||||||||
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. |