Panel Styly CSS

Panel Styly CSS umožňuje sledovat pravidla CSS a vlastnosti ovlivňující aktuálně vybraný element stránky (režim Současný) nebo všechna pravidla a vlastnosti dostupné dokumentu (režim Vše). Pomocí přepínače v horní části panelu můžete přepínat mezi oběma režimy. Panel Styly CSS také umožňuje upravovat vlastnosti CSS v režimu Současný i v režimu Vše.

V režimu Současný zobrazuje panel Styly CSS tyto tři dílčí panely: dílčí panel Přehled pro výběr, který zobrazuje vlastnosti CSS pro aktuální výběr v dokumentu, dílčí panel Pravidla, který zobrazuje umístění vybraných vlastností (nebo kaskádu pravidel pro vybraný tag), a dílčí panel Vlastnosti, který umožňuje upravit vlastnosti CSS pro pravidlo aplikované na výběr.

Velikost panelů můžete měnit tažením okrajů mezi panely, velikost sloupců je možné upravit tažením oddělovačů.

Panel Přehled pro výběr zobrazuje souhrn vlastností CCS a jejich hodnot pro aktuálně vybranou položku v aktivním dokumentu. V souhrnu jsou vlastnosti pro všechna pravidla, která se přímo vztahují k výběru. Zobrazují se pouze nastavené vlastnosti.

Následující pravidla například tvoří styl třídy a styl tagu (v tomto případě odstavce):

Pokud v okně dokumentu vyberete text odstavce se stylem třídy .foo, v panelu Přehled pro výběr se zobrazí příslušné vlastnosti pro obě pravidla, protože se obě pravidla vztahují k výběru. V tomto případě by panel Přehled pro výběr zobrazil seznam následujících vlastností:

V panelu Přehled pro výběr jsou vlastnosti seřazeny ve vzestupném pořadí podle přesnosti. V předchozím příkladu styl tagu definuje velikost písma a styl třídy definuje rodinu písma a barvu. (Rodina písma definovaná stylem třídy přepíše rodinu písma definovanou stylem tagu, protože selektory tříd mají vyšší přesnost než selektory tagů. Další informace o specifikacích CSS naleznete na adrese www.w3.org/TR/CSS2/cascade.html.)

Panel Pravidla používá dvě různá zobrazení – zobrazení Popis nebo zobrazení Pravidla – v závislosti na výběru. V zobrazení Popis (výchozí zobrazení) panel zobrazí název pravidla, které definuje vybranou vlastnost CSS, a název souboru obsahujícího toto pravidlo. V zobrazení Pravidla panel zobrazí kaskádu neboli hierarchii všech pravidel, která se přímo nebo nepřímo vztahují k aktuálnímu výběru. (Tag, ke kterému se pravidlo přímo vztahuje, se zobrazí v pravém sloupci.) Mezi těmito dvěma zobrazeními můžete přepínat pomocí tlačítek Zobrazit informace a Zobrazit kaskádu, která se nachází v pravém horním rohu panelu Pravidla.

Pokud vyberete vlastnost v panelu Přehled pro výběr, všechny vlastnosti definujícího pravidla se objeví v panelu Vlastnosti. (Pokud vyberete zobrazení Pravidla, definující pravidlo bude také vybráno v panelu Pravidla.) Pokud například máte pravidlo pojmenované .maintext, které definuje rodinu písma, velikost písma a barvu, a pak jednu z těchto vlastností vyberete v panelu Přehled pro výběr, všechny vlastnosti definované pravidlem .maintext se zobrazí v panelu Vlastnosti a vybrané pravidlo .maintext se zobrazí v panelu Pravidla. (Navíc v případě, že vyberete nějaké pravidlo v panelu Pravidla, vlastnosti tohoto pravidla se zobrazí v panelu Vlastnosti.) Pomocí panelu Vlastnosti pak můžete CSS informace rychle upravit, ať už jsou vloženy v aktuálním dokumentu nebo navázány pomocí připojeného seznamu stylů. V panelu Vlastnosti se standardně zobrazují pouze vlastnosti, které už byly nastaveny (jsou uspořádány v abecedním pořadí).

Panel Vlastnosti můžete používat ve dvou dalších zobrazeních. Zobrazení kategorií vypíše vlastnosti zařazené do kategorií, například Písmo, Pozadí, Blok, Okraj a podobně, přičemž nastavené vlastnosti v každé kategorii se zobrazí nahoře modrou barvou. Zobrazení seznamu vypíše seznam všech dostupných vlastností v abecedním pořadí a nastavené vlastnosti zobrazí nahoře modrou barvou. Chcete-li přepnout mezi zobrazeními, klepněte v levém spodním rohu panelu Vlastnosti na tlačítko Zobrazit zobrazení kategorií, Zobrazit zobrazení seznamu nebo Zobrazit pouze nastavené vlastnosti.

Ve všech zobrazeních se nastavené vlastnosti zobrazí modře a vlastnosti nepodstatné pro daný výběr jsou červeně přeškrtnuté. Pokud podržíte myš nad nepodstatným pravidlem, zobrazí se zpráva vysvětlující, proč je vlastnost nepodstatná. Vlastnost je většinou nepodstatná v případě, že byla přepsána, nebo se nejedná o zděděnou vlastnost.

Všechny změny, které provedete v panelu Vlastnosti, se okamžitě aplikují a vy můžete průběžně sledovat náhled své práce.

Panel Styly CSS v režimu Vše

V režimu Vše zobrazuje panel Styly CSS tyto dva dílčí panely: panel Všechna pravidla (nahoře) a panel Vlastnosti (dole). V panelu Všechna pravidla se zobrazí seznam pravidel definovaných v aktuálním dokumentu včetně pravidel, která jsou definovaná v seznamech stylů připojených k aktuálnímu dokumentu. Panel Vlastnosti vám umožňuje upravit vlastnosti CSS pro pravidla vybraná v panelu Všechna pravidla.

Velikost panelu můžete měnit přetažením okraje mezi panely, velikost sloupců vlastností přetažením oddělovačů.

Pokud vyberete pravidlo v panelu Všechna pravidla, všechny vlastnosti definované v tomto pravidlu se objeví v panelu Vlastnosti. Pomocí panelu Vlastnosti pak můžete svoje styly CSS rychle upravit, ať už jsou vložené v aktuálním dokumentu nebo navázané z připojeného seznamu stylů. V panelu Vlastnosti se standardně zobrazují pouze vlastnosti, které už byly dříve nastaveny, a jsou uspořádané v abecedním pořádku.

Vlastnosti můžete zobrazit ve dvou dalších zobrazeních. Zobrazení kategorií vypíše vlastnosti rozdělené do kategorií, například Písmo, Pozadí, Blok, Okraj a podobně, přičemž nastavené vlastnosti v každé kategorii se zobrazí nahoře. Zobrazení seznamu vypíše seznam všech dostupných vlastností v abecedním pořadí a nastavené vlastnosti uvede nahoře. Chcete-li přepnout mezi zobrazeními, klepněte v levém spodním rohu panelu Vlastnosti na tlačítko Zobrazit zobrazení kategorií, Zobrazit zobrazení seznamu nebo Zobrazit pouze nastavené vlastnosti. Nastavené vlastnosti se ve všech zobrazeních zobrazují modře.

Všechny změny, které provedete v panelu Vlastnosti, se okamžitě aplikují a vy můžete průběžně sledovat náhled své práce.

Tlačítka a zobrazení panelu Styly CSS

V režimech Vše i Současný obsahuje panel Styly CSS tři tlačítka, která umožňují změnit zobrazení v panelu Vlastnosti (spodní panel):

Vlastnosti CSS podporované aplikací Dreamweaver se rozdělí do osmi kategorií: písmo, pozadí, blok, okraj, rámeček, seznam, umístění a rozšíření. Vlastnosti každé kategorie jsou umístěny v seznamu, který rozbalíte nebo sbalíte klepnutím na tlačítko plus (+) vedle názvu kategorie. Nastavené vlastnosti se zobrazí nahoře v seznamu modrou barvou.

Zobrazí všechny vlastnosti CSS podporované aplikací Dreamweaver v abecedním pořadí. Nastavené vlastnosti se zobrazí nahoře v seznamu modrou barvou.

Zobrazí pouze vlastnosti, které byly nastaveny. Standardním zobrazením je zobrazení nastavených vlastností.

V režimech Vše i Současný obsahuje panel Styly CSS také následující tlačítka:

Otevře dialogové okno Připojit externí seznam stylů. Vyberte externí seznam stylů, který chcete připojit nebo importovat do aktuálního dokumentu.

Otevře dialogové okno, kde můžete vybrat typ stylu, který chcete vytvořit (například vytvořit styl třídy, předefinovat tag HTML nebo definovat selektor CSS).

Otevře dialogové okno, ve kterém můžete upravit styly v aktuálním dokumentu nebo v externím seznamu stylů.

Odstraní vybrané pravidlo nebo vlastnost z panelu Styly CSS a odstraní formátování z elementů, u kterých bylo aplikováno. (Neodstraní ale vlastnosti třídy nebo identifikátoru odkazované tímto stylem). Tlačítkem odstranit pravidlo CSS je možné rovněž odpojit (nebo „zrušit odkaz“) připojený seznam stylů CSS.

Otevření panelu Styly CSS

Pomocí panelu Styly CSS můžete zobrazit, vytvořit, upravit nebo odstranit styly CSS a také připojit k dokumentům externí seznamy stylů.