Embed Size (px)
DESCRIPTION
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, - PowerPoint PPT Presentation
Citation preview
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací
materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/34.0809.
Pozadí
1
4.. ledna 2013 VY_32_INOVACE_160314_POZADI_DUM
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
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.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
3
background-color
Vlastnost určuje barvu pozadí.Hodnoty:barva,transparent,inherit.
Příklad:body { background-color: black }
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
4
background-imageParametr určuje obrázek umístěný na pozadí.Hodnoty:• url,• none,• inherit.Příklad:body {background-image:url(obr/podklad.jpg}
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
5
background-positionUrčuje polohu obrázku definovaného na pozadí.Hodnoty:• %,• jednotky délky,• top,• center,• bottom,• left,• right,• inherit.
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
6
background-positionVýchozí hodnota je 0% 0% = top left.Obecná syntaxe:background-position: hodnotabackground-position:hodnota hodnota
Příklad:body { background-image: url(obr/podklad.jpg no-repeat;background-position:right top }
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
7
background-repeatUrč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 }
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
8
background-originVlastnost 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 }
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
9
background-attachmentUrč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 }
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
10
Zadání vlastností v jednom zápisu
div { background:#CC url(picture/p1.jpg) top right repeat-x }
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
11
• Své znalosti si zopakujte v zde.•Kvíz
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
12
Zdroje:
• JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: Computer Press, 2006. ISBN 80-251-0773-6.
• STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: Computer Press, 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: Zoner Press, 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
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>
<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>
13
Zdroje – cvičný příklad• Extensible Markup Language. 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.pnghttp://t0.gstatic.com/images?q=tbn:ANd9GcSQEE605nQyzqg6DaDFQ3JMCDRFW-aHw0IKwGAY2GU5R9VSpONNLw
