VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS formátování.

Prezentace na téma: "VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS formátování."— Transkript prezentace:

1 VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS formátování

2 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku  Budeme používat externí styly.  Využijeme soubory z předchozího příkladu (layout.css, format.css, index.html, stranka2.html, stranka3.html, stranka4.html).  V extérním stylu budeme formátovat odkazy, text.  Naučíme se vytvářet tlačítka.

3 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku  Externí stylopis tj. soubor *.css se na www stránkách odkazuje v hlavičce tagem v našem příkladu:

4 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku selektor {vlastnost1: hodnota; vlastnost2: hodnota} Celá stránka modrým písmem body {color: blue} Všechny nadpisy druhé úrovně budou červenou kurzívou h2 {color: red; font-style: italic;} Odstavce s odsazením prvního řádku p {text-indent: 30px;}

5 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku Lze určit stejné vlastnosti několika selektorům najednou pokud je oddělíme čárkami: Nadpisy 1., 2. a 3. úrovně budou modré orámováné h1, h2, h3 {color:blue; border-bottom:1px;}

6 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku  class = třídy  id = identifikátory (lze použít v dokumentu jenom jednou, jinak stejné jako class) CSS zápis /* zarovnání vpravo, tučné písmo * /.pismo { text-align: right; font-weight: bold} HTML dokument !TEČKA

7 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku Zapište pseudotřídy pro odkazy do souboru format.css: a {text-decoration: none} /*odkazy nebudou podtrhávané*/ a:hover {color: red; text-decoration: underline} /*odkaz,přes který se jede myší, bude podtržený a červený*/

8 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku Vyzkoušejte tvorbu „Menu“ různými způsoby:  Odkazy jako tlačítka ZDEZDE  Tlačítka – animace na webu zdarma např. www.bestpage.cz www.bestpage.cz  Odkazy v CSS:.tlacitko a.tlacitko {vlastnost1: hodnota1; vlastnost2:hodnota2;} a:hower.tlacitko {vlastnost1: hodnota1; }

9 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku  Otevřete si v Poznámkovém bloku nebo v PSPad „stranka4.html“ a vložte libovolný dlouhý text.  Do „layout.css“ vložte rolovací lištu.right {overflow: auto; }  V „stranka4.html“ přiřaďte tagy pro nadpisy h2, h3 a pro odstavce p  Zvýrazněte částí textu v „stranka4.html“ pomocí tagu span a definováním třídy ve „format.css“  Odsaďte text pomocí vlastností margin: nebo margin-left: ve „format.css“

10 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku  Příklad - zdrojový kódzdrojový kód  Soubor layout.csslayout.css  Soubor format.cssformat.css  Webové stránky v prohlížečiprohlížeči

11 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.07/Ku  JANOVSKÝ, Dušan. Jak psát web [online]. 1999, 14. 10. 2012 [cit. 2013-02-06]. Dostupné z: http://www.jakpsatweb.cz/ http://www.jakpsatweb.cz/  Jak dobře začít s tvorbou webu - po lopatě [online]. 2006 [cit. 2013-02-06]. Dostupné z: http://polopate.jakpsatweb.cz/index.php?page=uvod http://polopate.jakpsatweb.cz/index.php?page=uvod  Tvorba webu [online]. 2003 [cit. 2013-02-06]. Dostupné z: http://www.tvorba-webu.cz/xhtml/ http://www.tvorba-webu.cz/xhtml/  CASTRO, Elisabeth. HTML, XHTML a CSS. Brno: Computer Press, 2007. ISBN 978-80-251-1531-2.