Využijte toto téma k seznámení se základními vlastnostmi prvků CSS, jako jsou pravidla CSS, jejich selektory, dědičnost a mnohé další. Seznamte se také s postupem přiřazení prvku CSS k webovým stránkám v aplikaci Dreamweaver.
O tabulkách kaskádových stylů
Kaskádové styly (CSS) jsou soubor pravidel formátování, která řídí vzhled obsahu na webové stránce. Použití stylů CSS k formátování stránky odděluje obsah od prezentace. Obsah vaší stránky—kód HTML—se nachází v souboru HTML a pravidla CSS definující prezentaci kódu se nacházejí v jiném souboru (externí šablona stylů) nebo v jiné části dokumentu HTML (obvykle v sekci head). Oddělení obsahu od prezentace výrazně usnadňuje údržbu vzhledu webu z centrálního místa, protože nemusíte aktualizovat všechny vlastnosti na každé stránce pokaždé, když chcete provést změnu.Oddělení obsahu od prezentace také vede k jednoduššímu a čitelnějšímu kódu HTML, který zajišťuje kratší časy načítání prohlížeče a zjednodušuje navigaci lidem s problémy s přístupností (například těm, kteří používají čtečky obrazovky).
CSS vám poskytuje velkou flexibilitu a kontrolu nad přesným vzhledem stránky.Pomocí CSS můžete řídit mnoho vlastností textu včetně konkrétních písem a velikostí písem; tučného písma, kurzívy, podtržení a stínů textu; barvy textu a barvy pozadí; barvy odkazů a podtržení odkazů; a mnohem více. Používáním CSS k řízení vašich písem můžete také zajistit konzistentnější zpracování rozložení a vzhledu stránky ve více prohlížečích.
Kromě formátování textu můžete použít CSS k řízení formátu a umístění blokových prvků na webové stránce.Prvek na úrovni bloku je samostatný kus obsahu, obvykle oddělený novým řádkem v HTML a vizuálně formátovaný jako blok. Například značky h1, značky p a značky div všechny vytvářejí prvky na úrovni bloků na webové stránce. Můžete nastavit okraje a ohraničení pro prvky na úrovni bloků, umístit je na konkrétní místo, přidat jim barvu pozadí, obtékat je textem a tak dále. Manipulace s prvky na úrovni bloků je v podstatě způsob, jak rozložíte stránky 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 označení (například p, h1, název třídy nebo id), které identifikuje formátovaný prvek, a blok deklarace definuje vlastnosti stylu.V následujícím příkladu je h1 selektor a vše, co se nachází mezi složenými závorkami ({}) je blok deklarace:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Jednotlivá deklarace se skládá ze dvou částí, vlastnosti (například font-family) a hodnoty (například Helvetica). V předchozím pravidle CSS byl vytvořen konkrétní styl pro značky h1: text pro všechny značky h1 propojené s tímto stylem bude 16 pixelů velký, písmo Helvetica a tučné.
Styl (který pochází z pravidla nebo souboru pravidel) se nachází na místě odděleném od skutečného textu, který formátuje—obvykle v externí šabloně stylů nebo v části head dokumentu HTML. Takto jedno pravidlo pro značky h1 může platit pro mnoho značek najednou (a v případě externích šablon stylů může pravidlo platit pro mnoho značek najednou na mnoha různých stránkách). Tímto způsobem CSS poskytuje extrémně snadnou možnost aktualizace. Když aktualizujete pravidlo CSS na jednom místě, formátování všech prvků, které používají definovaný styl, se automaticky aktualizuje na nový styl.
V aplikaci Dreamweaver můžete definovat následující typy stylů:
Styly tříd umožňují použít vlastnosti stylu na libovolný prvek nebo prvky na stránce.
Styly značek HTML předefinovávají formátování pro konkrétní značku, například h1. Když vytvoříte nebo změníte styl CSS pro značku h1, veškerý text formátovaný se značkou h1 se okamžitě aktualizuje.
Pokročilé styly předefinovávají formátování pro konkrétní kombinaci prvků nebo pro jiné formy selektorů povolené CSS (například selektor td h2 se použije když se záhlaví h2 zobrazí uvnitř buňky tabulky.) Pokročilé styly mohou také předefinovávat formátování pro značky, které obsahují konkrétní atribut id (například styly definované pomocí #myStyle se použijí na všechny značky, které obsahují pár atribut-hodnota id="myStyle").
Pravidla CSS mohou být uložena v následujících umístěních:
Externí seznamy stylů CSS
Kolekce pravidel CSS uložené v samostatném, externím souboru CSS (.css) (nikoli v souboru HTML). Tento soubor je propojen s jednou nebo více stránkami webu pomocí odkazu nebo pravidla @import v sekci head dokumentu.
Interní (vložené) seznamy stylů CSS
Kolekce pravidel CSS zahrnuté ve značce style v části head dokumentu HTML.
Inline styly
Definované v určitých výskytech tagů uvnitř dokumentu HTML. (Používání Inline stylů se nedoporučuje.)
Dreamweaver rozpoznává styly definované v existujících dokumentech, pokud jsou v souladu se směrnicemi pro styly CSS.Dreamweaver také vykresluje většinu aplikovaných stylů přímo v zobrazení Návrh."(Náhled dokumentu v okně prohlížeče\nvám však poskytne nejpřesnější „živé" vykreslení stránky.)Některé styly CSS se vykreslují jinak v prohlížečích Microsoft Internet Explorer, Netscape, Opera, Apple Safari nebo jiných prohlížečích a některé aktuálně nejsou podporovány žádným prohlížečem.
O kaskádových stylech
Pojem kaskádování označuje způsob, jakým prohlížeč nakonec zobrazuje styly pro konkrétní prvky na webové stránce.Za styly, které vidíte na webové stránce, jsou odpovědné tři různé zdroje: stylová šablona vytvořená autorem stránky, přizpůsobený výběr stylů uživatele (pokud existuje) a výchozí styly samotného prohlížeče. Předchozí témata popisují vytváření stylů pro webovou stránku z pozice autora jak webové stránky, tak šablony stylů připojené k této stránce.Prohlížeče však mají také své vlastní výchozí šablony stylů, které určují vykreslování webových stránek, a navíc si mohou uživatelé přizpůsobit své prohlížeče výběrem nastavení, která upravují zobrazení webových stránek."Konečný vzhled\nweb stránky je výsledkem pravidel ze všech těchto tří zdrojů,\nkteré se spojí (nebo „kaskádují") a vykreslí web stránku optimálním\nzpůsobem.
Běžný tag – tag odstavce neboli tag <p> – ilustruje tento koncept. Ve výchozím nastavení mají prohlížeče styly, které definují písmo a velikost písma pro text odstavce (tj. text, který se nachází mezi tagy <p> v kódu HTML). Například v Internet Exploreru se ve výchozím nastavení zobrazuje veškerý základní text včetně textu odstavce písmem Times New Roman, Medium.
Jako autor webové stránky však můžete vytvořit styl, který přepíše výchozí styl prohlížeče pro písmo a velikost písma odstavce. Můžete například vytvořit následující pravidlo ve vašem stylu:
p {
font-family: Arial;
font-size: small;
}
Když uživatel načte stránku, nastavení písma a velikosti písma odstavce, která jste nastavili jako autor, přepíší výchozí nastavení textu odstavce prohlížeče.
Uživatelé mohou provádět výběry a přizpůsobit zobrazení prohlížeče optimálním způsobem pro vlastní použití. V Internet Exploreru může například uživatel vybrat Zobrazení > Velikost textu > Největší a rozšířit písmo stránky na čitelnější velikost, pokud si myslí, že je písmo příliš malé. Nakonec (alespoň v tomto případě) výběr uživatele přepíše jak výchozí styly prohlížeče pro velikost písma odstavce, tak odstavcové styly vytvořené autorem webové stránky.
Další důležitou součástí kaskádových stylů je dědičnost. Vlastnosti většiny prvků na web stránce jsou dědičné—například značky odstavce dědí určité vlastnosti ze značek body, značky span dědí určité vlastnosti ze značek odstavce atd. Pokud tedy vytvoříte v šabloně stylů následující pravidlo:
body {
font-family: Arial;
font-style: italic;
}
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:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Veškerý základní text bude Arial a kurzíva kromě odstavce (a jeho zděděného) textu, který se zobrazí jako Courier normální (nekurzíva).Technicky značka odstavce nejprve zdědí vlastnosti, které jsou nastavené pro značku body, ale poté tyto vlastnosti ignoruje, protože má definované vlastní vlastnosti. Jinými slovy, zatímco prvky stránky obecně dědí vlastnosti shora, přímé použití vlastnosti na značku vždy způsobí přepsání standardní formule pro dědičnost.
Kombinace všech faktorů probíraných výše plus další faktory jako specifičnost CSS (systém, který dává různou váhu konkrétním druhům CSS pravidel) a pořadí CSS pravidel nakonec vytvoří složitou kaskádu, kde položky s vyšší prioritou přepisují vlastnosti, které mají nižší priority. Další informace o pravidlech řídících kaskádu, dědičnost a specifičnost naleznete na 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 CSS Designer naleznete v části Vytvoření rozložení stránek pomocí CSS Designer.
Při aplikaci 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 www.adobe.com/go/vid0153.
O zkráceném zápisu vlastností CSS
Specifikace CSS umožňuje vytvoření stylů pomocí zkrácené syntaxe známé jako shorthand CSS. Shorthand CSS vám umožňuje určit hodnoty několika vlastností pomocí jediné deklarace. Například vlastnost font vám umožní nastavit vlastnosti font-style, font-variant, font-weight, font-size, line-height a font-family na jednom řádku.
Klíčovou záležitostí, kterou je třeba vzít na vědomí při používání zkrácených CSS, je, že hodnoty vynechané ze zkrácené vlastnosti CSS jsou přiřazeny k jejich výchozí hodnotě.To může způsobit nesprávné zobrazení stránek, když jsou dva nebo více pravidel CSS přiřazeno ke stejnému značce.
Například pravidlo h1 zobrazené níže používá podrobnou syntaxi CSS.Všimněte si, že vlastnosti font-variant, font-stretch, font-size-adjust a font-style mají přiřazeny výchozí hodnoty.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Při přepsání jako jediná zkrácená vlastnost může stejné pravidlo vypadat následovně:
h1 { font: bold 16pt/18pt Arial }
Při zápisu pomocí zkrácené notace jsou vynechané hodnoty automaticky přiřazeny svým výchozím hodnotám.Předchozí zkrácený příklad tak vynechává značky font-variant, font-style, font-stretch a font-size-adjust.
Pokud máte styly definované na více místech (například vložené do stránky HTML i importované z externího stylu) a používáte jak krátkou, tak dlouhou formu syntaxe CSS, uvědomte si, že vynechané vlastnosti ve zkráceném pravidle mohou přepsat (nebo kaskádovat) vlastnosti, které jsou explicitně nastavené v jiném pravidle.
Z tohoto důvodu Dreamweaver používá ve výchozím nastavení dlouhou formu notace CSS.Tím se předcházejí možným problémům způsobeným přepsáním dlouhého pravidla zkráceným pravidlem. Pokud otevřete webovou stránku, která byla kódována se zkrácenou notací CSS v aplikaci Dreamweaver, uvědomte si, že Dreamweaver vytvoří všechna nová pravidla CSS pomocí rozepsané formy.Můžete určit, jak Dreamweaver vytváří a upravuje pravidla CSS změnou předvoleb pro úpravy CSS v kategorii Styly CSS dialogového okna Předvolby (Upravit > Předvolby ve Windows; Dreamweaver > Předvolby na systému Macintosh).
Dreamweaver a CSS
V aplikaci Adobe Dreamweaver můžete pracovat s CSS 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 kódování nabízených aplikací Adobe Dreamweaver najdete v tématu Prostředí kódování v aplikaci Adobe 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 najdete v tématu Preprocesory CSS.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.
