Tvorba webových stránek
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.
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ý.
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.
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.
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).
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.
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.
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.
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: #009900 barva písma background-color: yellow barva pozadí width: 650px šířka prvku a mnoho dalších.
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">
Přímý zápis stylu Definice stylu jako atributu značky Zobrazení stránky v prohlížeči
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ě.
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.
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.
Zápis stylu v hlavičce stránky Definice stylu v hlavičce stránky A zobrazení odstavců v prohlížeči
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.
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: http://www.jakpsatweb.cz/css/css-vlastnostihodnoty-prehled.html
Poznámka Všechny ukázky jsou vytvářeny v programu PSPad. Bylo ponecháno základní nastavení zvýraznění syntaxe.
Zdroje Texty: http://www.jakpsatweb.cz/css/css-vlastnosti-hodnotyprehled.html http://home.ef.jcu.cz/~inrem/edu/infa/html/css.html http://www.adaptic.cz/znalosti/slovnicek/kaskadovestyly/ http://home.ef.jcu.cz/~inrem/edu/infa/html/css-vazbana-dokument.html http://home.ef.jcu.cz/~inrem/edu/infa/html/css-zapisstylu.html http://cs.wikipedia.org/wiki/kask%c3%a1dov%c3%a9_ styly Obrázky: Vlastní