1 Tvorba webových stránek2 Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností ...
Ú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:
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; }
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:
Přehled jednotlivých stylů najdete například na stránkách: http://www.jakpsatweb.cz/css/css-vlastnosti-
hodnoty-prehled.html
Poznámka Všechny ukázky jsou vytvářeny v programu PSPad. Bylo ponecháno základní nastavení zvýraznění syntaxe.
