Tvorba webových stránek

Rozměr: px

Začít zobrazení ze stránky:

Download "Tvorba webových stránek"

Radovan Ondřej Konečný
před 8 lety
Počet zobrazení:

1 Tvorba webových stránek

2 Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech stránky. Velmi náročná je změna vzhledu u rozsáhlejšího websitu.

3 Kaskádové styly V klasickém HTML je obtížné, až nemožné, přesně umístit jednotlivé prvky na stránku. Pracnější bývá nastavení vzhledu a rozložení stránky (layout). Toto se většinou řeší pomocí tabulek, ale výsledek je pracný a zdrojový kód mnohdy nepřehledný.

Pracnější bývá nastavení vzhledu a rozložení stránky (layout).

4 Kaskádové styly Některé tyto obtíže lze vyřešit pomocí kaskádových stylů. Kaskádové styly CSS Cascading Style Sheet. Vznik kaskádových stylů se datuje k roku 1997.

5 Kaskádové styly Jsou-li kaskádové styly správně používány, umožňují naprosté oddělení vzhledu dokumentu od jeho obsahu. Toto oddělení obou vrstev (prezentační a strukturální) zvyšuje přístupnost webu a právě v něm spočívá hlavní rozdíl proti formátování s pomocí atributů, jež se používalo dříve.

Toto oddělení obou vrstev (prezentační a strukturální) zvyšuje

6 Kaskádové styly Další výhody používání kaskádových stylů: větší možnosti formátování, snazší správa větších prezentací, rychlejší načítání stránky, menší zatížení serveru, společně s JavaScriptem lze s CSS vytvářet DHTML (dynamické webové stránky).

rychlejší načítání stránky, menší zatížení serveru, společně

7 Kaskádové styly Styl lze prvku přiřadit třemi způsoby. Použít styl prostřednictvím atributu prvku když potřebuji změnit jeden prvek. Použít definici stylu v sekci HEAD nastavují se všechny elementy stejného typu. Definovat styly v externím souboru všechny stránky tak dostanou jednotný vzhled.

8 Kaskádové styly syntax Definice kaskádových stylů sestává z několika pravidel. Každé pravidlo obsahuje selektor a blok deklarací. Blok deklarací je uzavřen ve složených závorkách.

9 Kaskádové styly syntax Každý blok deklarací pak obsahuje seznam deklarací oddělených středníky. Každá deklarace sestává z identifikátoru vlastnosti, následuje dvojtečka a hodnota vlastnosti.

10 Styly základní přehled Jednotlivých stylů je velké množství, ale nyní si uvedeme jen některé příklady: font-style: italic styl písma kurzíva font-size: 14pt velikost písma text-align: justify zarovnání textu color: # barva písma background-color: yellow barva pozadí width: 650px šířka prvku a mnoho dalších.

14pt velikost písma text-align: justify zarovnání textu color: #009900 barva

11 Přímý zápis stylu Tato pravidla budou aplikována pouze na dotyčný element. Chybí zde ona kaskádovost. Styl je definován jako hodnota atributu style. Příklad: <div style="color: red; text-align: justify">

12 Přímý zápis stylu Definice stylu jako atributu značky Zobrazení stránky v prohlížeči

13 Zápis stylu v hlavičce stránky Tento způsob je vhodný, když má být styl nedělitelnou součástí dokumentu např. při odesílání stránky mailem. <style> p { color: green; } </style> Takto budou všechny odstavce dokumentu (ohraničené elementem p) obarveny zeleně.

14 Zápis pravidla stylu Ve webové stránce nezáleží na mezerách, proto oba zápisy reprezentují stejný styl. p { color: green; font-style: italic; } p { color: green; font-style: italic; } Toto pravidlo nastaví textu všech odstavců (tj. elementům p) kurzívu zelené barvy.

p { color: green; font-style: italic; } p { color: green;

15 Zápis pravidla stylu p { color: green; font-style: italic; } p je selektor jméno elementu, jehož vzhled měníme. složené závorky { } ohraničují definici pravidel pro uvedený selektor; color, font-style jsou vlastnosti selektoru green, italic jsou hodnoty vlastností; vlastnost a její hodnota jsou odděleny dvojtečkou; středník ; odděluje jednotlivé vlastnosti selektoru od sebe.

složené závorky { } ohraničují definici pravidel pro uvedený selektor; color, font-style jsou

16 Zápis stylu v hlavičce stránky Definice stylu v hlavičce stránky A zobrazení odstavců v prohlížeči

17 Použití externího souboru Jednotlivá pravidla zapíšeme v textovém dokumentu, který uložíme jako čistý text s koncovkou css. V hlavičce dokumentu je na tento soubor odkaz. Výhodou je, že změna stylu se projeví ve více stránkách najednou.

18 Použití externího souboru Odkaz na soubor se styly se provádí v hlavičce dokumentu: <head> <link rel="stylesheet" href="styly.css" type="text/css"> </head> Přehled jednotlivých stylů najdete například na stránkách:

css" type="text/css"> </head> Přehled jednotlivých stylů najdete

19 Poznámka Všechny ukázky jsou vytvářeny v programu PSPad. Bylo ponecháno základní nastavení zvýraznění syntaxe.

20 Zdroje Texty: styly Obrázky: Vlastní

cz/znalosti/slovnicek/kaskadovestyly/ http://home.ef.jcu.

Podobné dokumenty

Kaskádové styly základy grafiky

1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod