ADOBE DREAMWEAVER CS6 CSS - Formátování textu Autor: Ing. Vladimír Műller

Adobe Dreamweaver CS6. Formátování textu pomocí CSS. Tematický okruh ADOBE DREAMWEAVER CS6 Anotace Studenti 3. ročníku, obor Ekonomické lyceum, předmět Informační a komunikační technologie, Adobe Dreamweaver CS6. Formátování textu pomocí CSS. Existence tří pojetí CSS: kaskáda, dědičnost a následnictví. Metodický pokyn Žáci se na praktických příkladech seznámí se třemi pojetími CSS. Druh materiálu prezentace Datum tvorby 1. 2. 2014 Číslo materiálu VY_32_INOVACE_Mu1_5 EU peníze školám CZ.1.07/1.5.00/34.0154

Formátování textu Formátovací pravidlo CSS může předefinovat vlastnosti jakéhokoliv elementu HTML. Každé pravidlo se skládá ze dvou částí: selektoru a jedné nebo více deklarací. Zní to složitě, ale na příkladu to snadno pochopíme: Selektor Deklarace Element HTML p { color: red; font-family: Verdana; } Dva elementy HTML th, td { font-weight: bold; padding: 4px; } Následník div p { font-size: 95%; margin-top: 5px; } Třída .ctr { text-align: center; line-height: 16px; } Identifikátor #hdr { background-color: black; color: white; } Pořadím selektorů a jejich deklarací lze dosáhnout velkého množství různých kombinací formátování dokumentu. Pro lepší pochopení si ve cvičeních projdeme tři pojetí CSS: kaskádu, dědičnost a následnictví EU peníze školám CZ.1.07/1.5.00/34.0154

Kaskáda Spustíme Dreamweaver a otevřeme soubor kaskada.html, který získáme z http://knihy.cpress.cz/?p=actions&action=download/file&value=files&id=115084 Všimněte si, že kód obsahuje dvě identická pravidla CSS pro barvu h1. Zvítězilo pravidlo pro červenou barvu, protože je „blíže“ ke značce <h1>. Změňte pořadí barev a sledujte jak se projeví výsledek v okně Návrh. Hierarchie pravidel: 1. výchozí formátování prohlížeče, 2. šablona stylů umístěná v hlavičce dokumentu, 3. řádkový styl vlastního elementu HTML. EU peníze školám CZ.1.07/1.5.00/34.0154

Dědičnost Spustíme Dreamweaver a otevřeme soubor dedicnost.html, který získáme z http://knihy.cpress.cz/?p=actions&action=download/file&value=files&id=115084 Dvě deklarace h1 nejsou v rozporu, nesoupeří spolu – uplatní se obě dvě. Všimněte si nadbytečnosti kódu pro elementy h2, h3, p – jsou 3x stejné, což je zbytečné opakování – prodlužuje to kód a v konečném důsledku i načítání celé stránky v prohlížeči. Řešení: místo tří pravidel použijeme jen jedno pro rodičovský element div. div (color: blue; font-family: Verdana; ) Dokonce můžeme smazat i obě pravidla pro h1 a nic se nezmění. Proč? EU peníze školám CZ.1.07/1.5.00/34.0154

Následnictví Otevřeme soubor naslednik.html, který získáme na adrese http://knihy.cpress.cz/?p=actions&action=download/file&value=files&id=115084 Stránka obsahuje tři elementy h1 – samostatný, v rámci elementu div a v rámci elementu div, který je zároveň atributem třídy. Také jsou tu tři pravidla, která aplikují různé styly na tyto elementy. Zkopírujte celý první element <h1>Jsem tu sám</h1> a vložte ho dovnitř elementu div podle následujícího obrázku. V okně návrh sledujte jeho změnu: EU peníze školám CZ.1.07/1.5.00/34.0154

… pokračování Následnictví Všimněte si, že stačilo přesunout element a on změnil svoje formátování podle toho kam byl přesunut. Zkuste nakopírovat stejný element mezi značky div, která je zároveň atributem třídy „product“. Stejný element opět změní svoje formátování podle nastaveného formátování elementu div. EU peníze školám CZ.1.07/1.5.00/34.0154

Použité zdroje: Adobe DreamWeaver CS6. Computer press, 2013 Použité zdroje: Adobe DreamWeaver CS6. Computer press, 2013. ISBN 978-802-5137-352. Adobe Dreamweaver CS6. Knihy.cpress.cz [online]. [cit. 2014-02-01]. Dostupné z: http://knihy.cpress.cz/adobe-dreamweaver-cs6-oficialni-vyukovy-kurz.html# EU peníze školám CZ.1.07/1.5.00/34.0154