1 / 13

Pozadí

VY_32_INOVACE_160314_POZADI_DUM. 4.. ledna 2013. Pozadí. 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,

marlee
Download Presentation

Pozadí

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related