Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

VY_32_INOVACE_4.3.IVT1.05/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.

Podobné prezentace


Prezentace na téma: "VY_32_INOVACE_4.3.IVT1.05/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."— Transkript prezentace:

1 VY_32_INOVACE_4.3.IVT1.05/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

2 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  Každý text má obsah a formu  Formátování - barva a velikost písma, pozadí, zarovnání atd. Všechno, co nepatří do obsahu.  Starší způsob používá přímo HTML tagy (například kurzíva se dělá pomocí tagů a : kurzíva ).  Novější způsob -- CSS styly -- používá tag a obecný atribut "style", kterému se přiřazuje nějaká definice

3 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  V anglickém originále Cascading Style Sheets  Česky "kaskádové styly“  Jazyk byl navržen standardizační organizací W3C  Autorem prvotního návrhu byl Håkon Wium Lie.  Oddělení vzhledu dokumentu od jeho struktury a obsahu

4 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  Přímý inline zápis  Pomocí " stylopisu " (angl. "stylesheet") v hlavičce stránky  Použitím externího stylopisu -- to je soubor *.css

5 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Přímý inline zápis  Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tento odstavec bude zelený.

6 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky  Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy p {color: green} Všechny odstavce na stránce budou zelené

7 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Použitím externího stylopisu -- to je soubor *.css  Vytvoří se soubor, který se pojmenuje například styly.css. V něm bude pouze tento text: p {color: green}  Do hlavičky html dokumentu se musí napsat odkaz na tento soubor:  Budeme používat tento způsob – extérní stylopis

8 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  Otevřete PSPad editor  Vyberte „Vytvořit nový soubor“/ Cascading Style Sheet  Soubor uložíme do složky html_4 pod názvem styly.css

9 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  Do souboru styly.css napište: body {background: silver url(obrazek.jpg)} je totéž jako body {background-color: silver ; background- image: url("pozadi.jpg")} Na pozadí bude obrázek a pokud se nezobrazí, tak bude pozadí šedé.

10 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  Do souboru styly.css napište: h1 {color: green; text-align: center} h2 {color: blue; font-style: italic} p {text-indent: 30px; color: #A1F2D3; font-size: 24px; margin: 0px 0px 0px 0px; } Text-indent je odsazení prvního řádku, color je barva písma, size je velikost písma a margin jsou okraje - zde nastavené všude na nulu.  Do souboru index.html do hlavičky napište:

11 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  Příklad - zdrojový kódzdrojový kód  Soubor styly.cssstyly.css  Stránka v prohlížečiprohlížeči

12 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  KOSEK, Jiří. Vytváříme si domovskou stránku [online] [cit ]. Dostupné z:  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:  Kaskádové styly. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: styly styly

13 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/  FOLINI, Franco. Soubor:Håkon Wium Lie.jpg [online] [cit ]. Dostupné z: A5kon_Wium_Lie.jpg A5kon_Wium_Lie.jpg  VIGNONI, David. Soubor:Nuvola mimetypes source css.png [online] [cit ]. Dostupné z: mimetypes_source_css.png mimetypes_source_css.png


Stáhnout ppt "VY_32_INOVACE_4.3.IVT1.05/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."

Podobné prezentace


Reklamy Google