Download
pozad n.
Skip this Video
Loading SlideShow in 5 Seconds..
Pozadí PowerPoint Presentation

Pozadí

256 Views Download Presentation
Download Presentation

Pozadí

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. VY_32_INOVACE_160314_POZADI_DUM 4.. ledna 2013 Pozadí

  2. Vlastnosti pozadí Nastavení vlastnosti background umožní definování vlastností pozadí elementu. Tento parametr je možné použít na nastavení pozadí textu, odstavce, celé stránky,… Parametry: • background-color, • background-image, • background-position, • background-repeat, • background-origin, • background-attachment.

  3. background-color Vlastnost určuje barvu pozadí. Hodnoty: barva, transparent, inherit. Příklad: body { background-color: black }

  4. background-image Parametr určuje obrázek umístěný na pozadí. Hodnoty: • url, • none, • inherit. Příklad: body {background-image:url(obr/podklad.jpg}

  5. background-position Určuje polohu obrázku definovaného na pozadí. Hodnoty: • %, • jednotky délky, • top, • center, • bottom, • left, • right, • inherit.

  6. background-position Výchozí hodnota je 0% 0% = top left. Obecná syntaxe: background-position: hodnota background-position:hodnota hodnota Příklad: body { background-image: url(obr/podklad.jpg no-repeat; background-position:right top }

  7. background-repeat Určuje chování obrázku na pozadí. Hodnoty: • repeat, • repeat-x, • repeat-y, • no-repeat, • inherit. Příklad: body { background-image: url(obr/podklad.jpg; background-repeat:repeat-x }

  8. background-origin Vlastnost určuje výchozí bod, od něhož se začíná obrázek na pozadí elementu vykreslovat. Hodnoty: • border, • padding, • content. Příklad: div {border: 15px solid grey; padding:url(podklad.gif) no- repeat; background-origin:content }

  9. background-attachment Určuje způsob posouvání obrázku na pozadí. Hodnoty: • scroll, • fixed, • inherit. Příklad: body { background-image: url(obr/podklad.gif) background-attachment:fixed }

  10. Zadání vlastností v jednom zápisu div { background:#CC url(picture/p1.jpg) top rightrepeat-x }

  11. Své znalosti si zopakujte v zde. • Kvíz

  12. Zdroje: • JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: ComputerPress, 2006. ISBN 80-251-0773-6. • STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: ComputerPress, 2003, 178 s. ISBN 80-7226-872-4. • GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: ZonerPress, 2011, 286 s. Encyklopedie webdesignera. ISBN 978-80-7413-166-0. • W3C. Kaskádové styly: domovská stránka [online]. 2012-05-06, 06:20:10 [cit. 2013-01-04]. Dostupné z: http://www.w3.org/Style/CSS/Overview.cs.html

  13. Zdroje – cvičný příklad • ExtensibleMarkupLanguage. Http://cs.wikipedia.org [online]. 2012 [cit. 2013-01-04]. Dostupné z: http://cs.wikipedia.org/wiki/Extensible_Markup_Language • Obrázky • xml2.gif http://zametkinapolyah.ru/wp-content/uploads/2012/04/XML2.gif • xml1.png http://t0.gstatic.com/images?q=tbn:ANd9GcSQEE605nQyzqg6DaDFQ3JMCDRFW-aHw0IKwGAY2GU5R9VSpONNLw