Vysvětlení kaskádových seznamů stylů

Kaskádové styly (CSS) je soubor pravidel formátování, která určují zobrazení obsahu na webové stránce. Formátováním pomocí stylů CSS můžete oddělit obsah od prezentace. Obsah webové stránky (kód HTML) se nachází v souboru HTML a pravidla CSS určující prezentaci kódu se nachází v jiném souboru (externí seznam stylů) nebo v jiné části dokumentu HTML (většinou v sekci head). Oddělení obsahu od prezentace zjednodušuje správu vzhledu stránek v jednom centrálním umístění, protože nemusíte při každé změně aktualizovat vlastnosti ve všech stránkách. Oddělení obsahu od prezentace je také cesta k jednoduššímu a čistšímu kódu HTML, který se rychleji načítá v prohlížeči, a zjednodušuje navigaci pro hendikepované uživatele (například používající programy pro čtení z obrazovky).

CSS nabízí velkou přizpůsobivost a kontrolu přesného vzhledu stránky. Pomocí CSS můžete nastavovat mnoho vlastností textu včetně konkrétních typů a velikostí písma; tučného písma, kurzívy, podtržení a stínování textu, barvy textu a barvy pozadí, barvy odkazu a podtržení odkazu a mnohem více. Pokud nastavujete písma pomocí CSS, můžete také zajistit shodnější zacházení s rozvržením stránky ve více prohlížečích.

Kromě formátování textu můžete na webové stránce pomocí CSS nastavit také formát a umístění elementů na úrovni bloku. Element na úrovni bloku je samostatná část obsahu, většinou oddělená novým řádkem v kódu HTML a vizuálně formátovaná jako blok. Například všechny tagy h1, tagy p a tagy div tvoří na webové stránce elementy na úrovni bloku. Pro elementy na úrovni bloku můžete nastavit okraje a rámečky, umístit je do určité pozice, přidat jim barvu pozadí, nechat kolem nich obtékat text a podobně. Manipulace s elementy na úrovni bloku v podstatě charakterizuje způsob, jakým vytváříte rozvržení stránek pomocí CSS.

O pravidlech CSS

Pravidlo formátování CSS se skládá ze dvou částí – selektoru a deklarace (nebo ve většině případů bloku deklarací). Selektor je termín (například p, h1,název třídy nebo identifikátor), který označuje formátovaný element, a deklarační blok určuje, jaké jsou vlastnosti stylu. V následujícím příkladu je h1 selektor a všechno, co se nachází mezi závorkami ({}), je deklarační blok.

Jednotlivé deklarace se skládají ze dvou částí, vlastnosti (například font-family) a hodnoty (například Helvetica). V předchozím pravidlu CSS byl pro tagy h1 vytvořen specifický styl: text pro všechny tagy h1 spojené s tímto stylem bude mít velikost 16 obrazových bodů, písmo Helvetica a bude tučný.

Styl neboli formátování (které vychází z pravidla nebo skupiny pravidel) je umístěn mimo vlastní text, většinou v externím seznamu stylů nebo v dokumentu HTML v sekci head. Takže jedno pravidlo pro tagy h1 je možné použít pro mnoho tagů zároveň (a v případě externího seznamu stylů je možné pravidlo použít pro mnoho tagů na mnoha stránkách najednou). Tímto způsobem poskytuje CSS neobyčejně snadnou možnost aktualizace webových stránek. Když aktualizujete pravidlo CSS v jednom umístění, formátování všech elementů, které používají definovaný styl, se automaticky aktualizují podle nového stylu.

V aplikaci Dreamweaver můžete definovat následující typy stylů:

• Styly tříd vám umožní použít vlastnosti stylu pro libovolný element nebo elementy na stránce.

• Styly tagů HTML předefinují formátování pro určitý tag, například h1. Pokud vytvoříte nebo změníte styl CSS pro tag h1, všechny texty formátované pomocí tagu h1 se okamžitě aktualizují.

• Rozšířené styly předefinují formátování pro specifickou kombinaci elementů nebo pro tvary selektoru dle zásad CSS (například selektor td h2 platí v případě, že se nadpis h2 vyskytne v buňce tabulky). Rozšířené styly mohou také předefinovat formátovaní pro tagy obsahující určitý atribut id (například styly definované pomocí #myStyle platí pro všechny tagy obsahující pár atribut – hodnota id="myStyle").

Pravidla CSS mohou být uložena v následujících umístěních:

Skupiny pravidel CSS uložené v samostatném externím souboru CSS (.css) (ne v souboru HTML). Tento soubor je propojen s jednou nebo více stránkami webového místa pomocí odkazu nebo pravidla @import v sekci head dokumentu.

Kolekce pravidel CSS zahrnuté do tagu style v sekci head dokumentu HTML.

Definované v určitých výskytech tagů uvnitř dokumentu HTML. (Používání Inline stylů se nedoporučuje.)

Aplikace Dreamweaver rozpozná styly definované v existujících dokumentech v případě, že jsou v souladu s pravidly stylů CSS. Aplikace Dreamweaver také vykresluje většinu použitých stylů přímo v zobrazení návrhu. (Nejpřesnější „živé“ vykreslení stránky ale získáte zobrazením náhledu dokumentu v okně prohlížeče.) Některé styly CSS se zobrazí rozdílně v prohlížečích Microsoft Internet Explorer, Netscape, Opera, Apple Safari nebo jiných a některé nejsou v současné době podporovány žádným prohlížečem.

O kaskádových stylech

Termín kaskádové se vztahuje na způsob, jak prohlížeč nakonec zobrazí styly pro určité elementy na webové stránce. Styly, které uvidíte na webové stránce, pocházejí ze tří různých zdrojů: ze seznamu stylů vytvořeného autorem stránky, z přizpůsobených stylů uživatele (pokud existují) a z výchozích stylů samotného prohlížeče. Předcházející témata popisují vytváření stylů pro webovou stránku z pozice autora jak webové stránky, tak i seznamu stylů připojeného k této stránce. Ale prohlížeče mají také své vlastní výchozí styly, které řídí vykreslování webových stránek, a uživatelé si navíc mohou prohlížeč přizpůsobit nastavením možností, které ovlivní zobrazování webových stránek. Výsledný vzhled webové stránky je výsledkem spojení pravidel ze všech těchto zdrojů dohromady („kaskádově“) pro optimální vykreslení webové stránky.

Tento princip si můžeme ilustrovat na běžném tagu – tagu odstavce <p>. Prohlížeče se standardně dodávají se seznamy stylů, které definují písmo a velikost písma pro text odstavce text (to znamená text, který je mezi tagy <p> v kódu HTML). Například v prohlížeči Internet Explorer se všechen základní text včetně textu odstavců standardně zobrazuje v písmu Times New Roman, Medium.

Jako autor webové stránky můžete ale vytvořit seznam stylů, který nahradí výchozí styl prohlížeče pro písmo a velikost písma odstavce. Ve svém seznamu stylů můžete například vytvořit následující pravidlo:

Když uživatel načte stránku, nastavení písma a velikosti písma odstavce, která jste nastavili jako autor, nahradí výchozí nastavení textu odstavce prohlížeče.

Uživatelé mohou vybrat možnosti, které optimálně přizpůsobí zobrazení v prohlížeči pro jejich vlastní použití. Například v prohlížeči Internet Explorer může uživatel vybrat volbu Zobrazení > Velikost textu > Největší, aby zvětšil písmo stránky na lépe čitelnou velikost, pokud si myslí, že je písmo příliš malé. V konečném výsledku (alespoň v tomto případě) výběr uživatele nahradí jak výchozí styl prohlížeče pro velikost písma odstavce, tak i styl odstavce vytvořený autorem webové stránky.

Další důležitou součástí kaskádových stylů je dědičnost. Vlastnosti pro většinu prvků na webové stránce jsou převzaté, například tagy odstavce převezmou určité vlastnosti z tagů těla, tagy span převezmou určité vlastnosti z odstavcových tagů a tak dále. Pokud například ve svém seznamu stylů vytvoříte následující pravidlo:

Všechen text odstavců na vaší webové stránce (stejně jako text, který zdědí vlastnosti z tagu odstavce) bude v písmu Arial a kurzívou, protože tag odstavce zdědí tyto vlastnosti z tagu body. Vaše pravidla ale mohou být specifičtější a můžete vytvořit styly, které změní standardní vzorec dědičnosti. Například pokud ve svém seznamu stylů vytvoříte následující pravidla:

Všechen základní text (body) bude v písmu Arial a kurzívou, kromě textu odstavců (a z něho zděděného), který se zobrazí v normálním písmu Courier (ne kurzívou). Technicky vzato tag odstavce nejdříve zdědí vlastnosti, které jsou nastaveny pro tag body, ale pak tyto vlastnosti ignoruje, protože má definované své vlastní vlastnosti. Jinými slovy, zatímco elementy stránky obecně dědí vlastnosti shora, přímé aplikování vlastnosti na některý tag vždy způsobí změnu standardního vzorce dědění.

Kombinace všech výše popsaných faktorů, plus dalších faktorů, jako je specifičnost (přesnost) CSS (systém, který dává různou váhu určitým typům pravidel CSS) a pořadí pravidel CSS, nakonec vytvoří složitou kaskádu, kde položky s vyšší prioritou nahradí vlastnosti, které mají nižší prioritu. Další informace pravidlech, kterými se řídí kaskádové styly, dědičnost a specifičnost najdete na adrese www.w3.org/TR/CSS2/cascade.html.

O formátování textu a CSS

Aplikace Dreamweaver standardně formátuje text pomocí kaskádových stylů (CSS). Styly, které použijete na text pomocí inspektoru Vlastnosti nebo příkazů nabídky, vytvoří pravidla, která se vloží do sekce head v rámci aktuálního dokumentu.

CSS pravidla a vlastnosti můžete tvořit a upravovat také pomocí panelu CSS Designer. Panel CSS Designer je mnohem obsáhlejší editor než inspektor Vlastnosti a zobrazuje všechna pravidla CSS, která byla definována pro aktuální dokument, ať už jde o pravidla vložená do sekce head dokumentu nebo v externím seznamu stylů. Adobe doporučuje, abyste používali jako primární nástroj při vytváření a úpravách CSS panel CSS Designer (spíše než inspektor Vlastnosti). Výsledkem bude čistější a jednodušeji spravovatelný kód.

Další informace o panelu CSS Designer naleznete v tématu Rozvržení stránek pomocí panelu CSS Designer.

Při použití stylů na dokumenty můžete kromě stylů a seznamů stylů, které vytvoříte, použít také seznamy stylů dodávané s aplikací Dreamweaver.

Výukovou lekci o formátování textu pomocí CSS naleznete na adrese www.adobe.com/go/vid0153_cz.

O zkráceném zápisu vlastností CSS

Specifikace CSS povoluje vytváření stylů pomocí zkrácené syntaxe známé jako zkrácený zápis CSS. Zkrácený zápis CSS umožňuje zadat hodnoty několika vlastností pomocí jediné deklarace. Vlastnost font například umožňuje nastavit vlastnosti font-style, font-variant, font-weight, font-size, line-height a font-family na jediném řádku.

Klíčovým problémem při používaní zkráceného zápisu CSS je, že hodnotám vynechaným ze zkráceného zápisu vlastnosti CSS bude přiřazena jejich výchozí hodnota. To může způsobit nesprávné zobrazení stránek v případě, že jsou jednomu tagu přidělena dvě nebo více pravidel CSS.

Například následující pravidlo pro h1 používá syntaxi nezkráceného zápisu CSS. Všimněte si, že vlastnostem font-variant, font-stretch, font-size-adjust a font-style byly přiděleny jejich výchozí hodnoty.

Pokud stejné pravidlo přepíšete pomocí zkráceného zápisu jako jednu vlastnost, bude vypadat následovně:

Pokud píšete pomocí zkráceného zápisu, vynechaným hodnotám budou automaticky přiřazeny jejich výchozí hodnoty. Předchozí příklad zkráceného zápisu tedy vynechává tagy font-variant, font-style, font-stretch a font-size-adjust.

Pokud máte styly definované ve více než jednom umístění (například vložené v HTML stránce i importované z externího seznamu stylů) a používáte zkrácenou i nezkrácenou formu syntaxe CSS, uvědomte si, že vlastnosti vynechané v pravidlu ve zkráceném zápisu mohou změnit (nebo stupňovitě nastavit) vlastnosti, které jsou explicitně nastavené v jiném pravidle.

Z tohoto důvodu aplikace Dreamweaver standardně používá nezkrácený zápis CSS. Takto se zabrání možným problémům způsobeným tím, že pravidlo ve zkráceném zápisu přepíše pravidlo v nezkráceném zápisu. Pokud v aplikaci Dreamweaver otevřete webovou stránku, která je kódovaná pomocí zkráceného zápisu CSS, uvědomte si, že aplikace Dreamweaver vytvoří nová CSS pravidla pomocí nezkráceného zápisu. Chcete-li určit způsob, jakým aplikace Dreamweaver tvoří a upravuje pravidla CSS, můžete změnit předvolby úprav CSS v dialogovém okně Předvolby v kategorii Styly CSS (Úpravy > Předvolby ve Windows; Dreamweaver > Předvolby na Macintosh).

Dreamweaver a CSS

V aplikaci Dreamweaver můžete s nástrojem CSS pracovat několika způsoby:

• Panel CSS Designer slouží k vytvoření prvků CSS s minimální potřebou psaní kódu. Další informace naleznete v tématu Rozvržení stránek pomocí panelu CSS Designer. 
• Psát kód pro prvky CSS můžete také ručně. Další informace o funkcích pro psaní kódu v aplikaci Dreamweaver naleznete v tématu Prostředí pro psaní kódu v aplikaci Dreamweaver.
• Pokud raději pracujete se soubory Sass, Scss nebo Less, můžete kód pro své soubory psát se svou oblíbenou syntaxí a používat je v aplikaci Dreamweaver. Další informace naleznete v tématu Preprocesory CSS.