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/ CSS formátování
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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.
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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:
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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;}
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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;}
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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ý*/
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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ř. Odkazy v CSS:.tlacitko a.tlacitko {vlastnost1: hodnota1; vlastnost2:hodnota2;} a:hower.tlacitko {vlastnost1: hodnota1; }
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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“
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ 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
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ VY_32_INOVACE_4.3.IVT1.07/Ku JANOVSKÝ, Dušan. Jak psát web [online]. 1999, [cit ]. Dostupné z: Jak dobře začít s tvorbou webu - po lopatě [online] [cit ]. Dostupné z: Tvorba webu [online] [cit ]. Dostupné z: CASTRO, Elisabeth. HTML, XHTML a CSS. Brno: Computer Press, ISBN