tvorba webovÝch strÁnek

Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE

TVORBA WEBOVÝCH STRÁNEKTVORBA WEBOVÝCH STRÁNEK

Osnova výukového modulu TWS_03bOsnova výukového modulu TWS_03b

1. Kaskádové styly (CSS)

2. Vazba CSS na (X)HTML dokument

3. Syntaxe CSS

4. Barva a délkové jednotky v CSS

5. Formátování obsahu a struktury (X)HTML dokumentu

KASKÁDOVÉ STYLY (CSS)

Úvod do kaskádových stylůÚvod do kaskádových stylů

Kaskádové styly z anglického Cascading Style Sheets (zkratka CSS)

Stylový předpis (jazyk), který se používá pro jednotné formátování a

pozicování obsahu a struktury webové stránky, vytvořené pomocí značek

(resp. elementů) jazyka (X)HTML.

Hlavním smyslem CSS je umožnit tvůrcům oddělit vzhled dokumentu

webové stránky od jeho struktury a obsahu.

Nahrazuje zastaralé formátovací značky (elementy) jazyka HTML, které

nepopisují obsah ani strukturu dokumentu.

Výhody použití kaskádových stylůVýhody použití kaskádových stylů

Nabízí daleko širší možnosti změny vzhledu webové stránky, než

formátovací značky jazyka HTML,

Odděluje formátování od struktury a obsahu webové stránky,

Určuje jednotný vzhled pro všechny dokumenty webové prezentace

(např. všechny nadpisy první úrovně červeně),

Snadná změna vzhledu pro celý web na jednom místě,

Standardy CSS 1, CSS 2 a CSS 2.1 podporují všechny současné

používané prohlížeče webových stránek.

Validátor kaskádových stylůValidátor kaskádových stylů

CSS validátor slouží k nalezení chyb a nestandardních definic podle

příslušné specifikace CSS. URL adresa CSS validátoru (česky):

jigsaw.w3.org/css-validator

popřípadě validator.w3.org a kliknout na odkaz CSS.

zadáme absolutní adresu stránek

Vazba na (X)HTML dokumentVazba na (X)HTML dokument

Existují tři způsoby, jak připojit stylový předpis k (X)HTML

dokumentu:

1.Zápis stylového předpisu přímo v (X)HTML elementu.

2.Vložit předpis přímo do hlavičky konkrétní webové stránky.

3.Definice stylového předpisu v externím souboru.


1. Zápis stylového předpisu přímo v (X)HTML elementu

Styly lze přiřadit přímo konkrétním (X)HTML elementům. Příklad:

<h1 style="font-size: 150%">Hlavní nadpis</h1>

<p style="color: #f00; text-align: justify">Text odstavce</p>

Nevhodné vkládání stylů, ve verzi XHTML 1.1 nepřípustné

(nevalidní):

- obtížně se udržuje jednotný vzhled webu,

- obtížně a zdlouhavě se provádějí změny stylu pro skupinu elementů,

- komplikuje orientaci ve zdrojovém kódu webové stránky.


2. Stylový předpis vložen přímo do hlavičky webové stránky

<head>

<style type="text/css">

body

{

font-family: Arial, sans-serif;

background: #fff url("main-back.jpg") repeat-x;

}

p { color: #333; text-align: justify; line-height: 2.5em; }

</style>

</head>

Značka pro hlavičku stránky, zde

se dále nachází titulek stránky

<title> </title> a META značky.


2. Stylový předpis vložen přímo do hlavičky webové stránky

Stylový předpis je platný pouze pro daný dokument (soubor) webové

stránky,

Obtížně se udržuje jednotný vzhled celé webové prezentace,

Zvětšuje celkový objem (velikost) souboru webové stránky,

Vhodné pouze tehdy, je-li stylový předpis jedinečný pro konkrétní

dokument (soubor) webové stránky.


3. Definice stylového předpisu v externím souboru

Stylový předpis je uložen v externím souboru s příponou *.css

(např. styly.css).

Příklad obsahu souboru se stylovým předpisem:

h1 { color: #333; }

p { color: #333; text-align: justify; line-height: 2.5em; }

#menu-vlevo { width: 190px; float: left; line-height: 2.2em; }



Pro připojení stylového předpisu k webové stránce se používá značka

<link /> vložená do hlavičky (mezi <head> a </head>) webové

stránky:<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />

<title>Název stránky</title>

<link rel="stylesheet" type="text/css" href="styly.css" />

</head>



Preferovaný způsob připojení CSS k webové stránce,

pro celou webovou prezentaci stačí jediný CSS soubor,

jednoduše dosažitelný jednotný vzhled webu, snadná správa a

změny,

stylový předpis není přímou součástí webové stránky = malá velikost

souboru,

důsledné oddělení struktury a obsahu od formátování webové

stránky.

Syntaxe kaskádových stylůSyntaxe kaskádových stylů

Zápis stylových předpisů přímo v (X)HTML elementu:

stylový předpis se zapisuje do atributu style,

CSS vlastnost a její hodnota se oddělují dvojtečkou,

lze definovat více vlastností pro element, oddělují se středníkem.

<p style="color: #f00; text-align: justify">Text odstavce</p>

CSS vlastnost

Hodnota CSS vlastnosti

Syntaxe kaskádových stylůSyntaxe kaskádových stylů

Zápis stylových předpisů do externího souboru (s příponou *.css):

selektor { vlastnost: hodnota; }

Selektor určuje, co má být formátováno,

Ve složených závorkách { } se nachází vlastnosti a jejich hodnoty,

Mezi vlastností (např. text-align) a hodnotou (např. left) je dvojtečka,

Je-li CSS vlastností více, oddělují se středníkem:

selektor { vlastnost_1: hodnota_1; vlastnost_2: hodnota_2; }

HTML element (značka) jako selektorHTML element (značka) jako selektor

Ovlivňuje všechny výskyty HTML elementu příslušné webové stránky:

html_element { vlastnost: hodnota; }

Pro celý (X)HTML dokument bude nastaven font ARIAL, popřípadě obecně

bezpatkové písmo:

body { font-family: Arial, sans-serif; }

Nadpisy první, druhé a třetí úrovně budou obarveny modře (tvorba skupin):

h1, h2, h3 { color: #00f; }

Všechny odkazy budou tučné a zároveň obarveny zelené:

a { font-weight: bold; color: #0f0; }

CSS třída jako selektorCSS třída jako selektor

Umožňují definovat více stylových předpisů pro jeden (X)HTML element:

.nazev_tridy { vlastnost: hodnota; }

p.nazev_tridy_1 { vlastnost: hodnota; }

p.nazev_tridy_2 { vlastnost_1: hodnota_1; vlastnost_2: hodnota_2; }

před název CSS třídy se vždy vkládá tečka,

Určitému (X)HTML elementu přiřazujeme styl pomocí atributu class:

<p class="nazev_tridy_1">Textový obsah odstavce…</p>


Příklad: Obsah souboru styly.css

p.cervene { color: #f00; font-weight: bold }

<head>

… obsah hlavičky webové stránky …


</head>

<body>

<p class="cervene">Toto je odstavec ovlivněný stylem CSS třídy.</p>

<p>Tento odstavec nebude ovlivněn.</p>

</body>


Stylový předpis formátuje celý text prvního odstavce.

Text druhého odstavce nebude ovlivněn.



.cervene { color: #f00; }

<head>

… obsah hlavičky webové stránky …


</head>

<body>

<p>Text v odstavci. <span class="cervene">Toto bude červené.</span>

A tento text už zase ne.</p>

</body>


Stylový předpis formátuje vybranou část textu v odstavci pomocí

řádkového (X)HTML elementu <span> </span>.

Uvnitř řádkového elementu <span> se nesmí nacházet blokové

elementy (např. <h1 až 6>, <p>, <div>, <blockquote>, <br>, <hr>) !!!

Užitečný tip:Užitečný tip:

Chceme-li jeden (X)HTML element

formátovat více způsoby na jedné stránce,

použijeme selektor třídy.

CSS identifikátor jako selektorCSS identifikátor jako selektor

Jsou velmi podobné CSS třídám. Používají se převážně tehdy, pokud se

stylový předpis používá na stránce pouze jednou.

#nazev_id { vlastnost: hodnota; }

p#nazev_id { vlastnost: hodnota; }

před název CSS identifikátoru se vždy vkládá mřížka,

Určitému (X)HTML elementu přiřazujeme styl pomocí atributu id:

<div id="nazev_id">Obsah blokového elementu DIV…</div>

Hlavní využití: Tvorba webdesignu pomocí CSS a blokového

(X)HTML elementu <div> </div> a formátování blokového obsahu



#ramecek {

width: 200px;

height: 70px;

border: 3px #f90 solid;

background-color: #ffc;

text-align: center;

font-size: 23px;

}

Blokový element DIV použitý v těle webové stránky:

<div id="ramecek"><p>Pavel Chmiel</p></div>

Šířka rámečku v pixelech

Výška rámečku v pixelech

Hranice: tloušťka, barva, plná čára

Pozadí: barva

Zarovnání textu: na střed

Velikost písma


Vytvoří se rámeček s příslušným formátováním:

(X)HTML element <div> je blokový, může najednou sdružovat

textový, obrázkový obsah a další blokové nebo řádkové elementy.


CSS identifikátory se využívají převážně

pro tvorbu webdesignu pomocí

stylů a (X)HTML elementu <div> </div>

Barvy v CSSBarvy v CSS

Slouží k obarvení textu, odkazů, pozadí a ohraničení,

Barvy se skládají (míchají) ze tří základních barev (RGB model):

R (Red) – červená G (Green) – zelená B (Blue) – modrá

- číslo v rozsahu 0 až 255 vyjadřuje intenzitu dané barevné složky.

Čím vyšší číslo, tím větší intenzita (vyšší světlost) dané složky.

Odstín šedé: všechny složky mají stejnou číselnou hodnotu.

Bílá barva: všechny složky nabývají maximální hodnoty 255.

Černá barva: všechny složky nabývají minimální hodnoty 0.

Zápis barvy v CSSZápis barvy v CSS

Název barvy (v angličtině) u pojmenovaných barev.

Kromě názvů základních barev existují i názvy rozšiřujících barevných

odstínů, výčet názvů barev lze nalézt například:

http://www.webtvorba.cz/css/barvy.html#pojmenovane

Tento způsob se v praxi používá nejméně.

zdroj: www.webtvorba.czNapříklad: p {color: blue;}


RGB zápis barvy

1.Procentuální vyjádření

Intenzitu každé barvy určujeme procenty 0% (minimální intenzita)

až 100% (maximální intenzita).

Příklad použití ve stylovém předpisu:

p { color: rgb(100%,0%,0%); }

#ramecek { border-color: rgb(50%,50%,50%); }


RGB zápis barvy

2.Desítkové vyjádření

Intenzitu každé barvy určujeme čísly 0 (minimální intenzita) až 255

(maximální intenzita).


p { color: rgb(255,0,0); }

#ramecek { border-color: rgb(128,128,128); }


RGB zápis barvy

3.Šestnáctkové vyjádření (hexadecimálně)

Čísla 00 až FF (tj. 0-9, A-F), zápis začíná hash-markem (mřížkou) #


p { color: #ff0000; }

#ramecek { border-color: #808080; }

Pokud jsou obě číslice odpovídající jedné barevné složce stejné,

můžeme použít zkrácený zápis:

p { color: #f00; }

Výběr odstínů barev v PSPaduVýběr odstínů barev v PSPadu

VZORNÍK BAREV

Vzorník barev lze zapnout / vypnout (ALT + C):

menu NÁSTROJE položka „Výběr barvy…“.

Z rozbalovacího menu lze vybrat rozsah barev.

Kód barvy se vloží poklepáním na danou barvu.

Vkládá se hexadecimální kód barvy, například:

#FF3300

Výběr odstínů barev v PSPaduVýběr odstínů barev v PSPadu

MÍCHÁNÍ BAREV

Nástroj pro míchání barev lze zapnout / vypnout:

menu NÁSTROJE položka „Zobrazit barvu“.

Pomocí tří posuvníků (R, G, B) nastavit

požadovaný odstín, poté lze číselný kód

barvy zkopírovat a vložit do stylu.

Lze také kliknout na tlačítko s „šipkou“

za číselným kódem či jménem barvy

(pokud existuje), tím se vloží do stylu.

Délkové jednotkyDélkové jednotky

Určují vertikální a horizontální rozměry objektů na webové stránce.

Hodnota se zapisuje číslem s příslušnou jednotkou:

- celá čísla (např. 2em, 24px, 120%, atd.)

- reálná čísla používají jako oddělovací znak tečku (např. 2.5em)

Některé CSS vlastnosti mohou mít i zápornou hodnotu (top: -20px;)

Mezi číselnou hodnotou a jednotkou se nedělá mezera:

- správně: 24px

- nesprávně: 24 px

Délkové jednotky – relativní jednotyDélkové jednotky – relativní jednoty

Relativní jednotky určují velikost relativně vzhledem k jiné velikosti.

Stylové předpisy využívající tyto jednotky se snáze přizpůsobí

zobrazovací jednotce.

em - velikost 1em odpovídá šířce velkého písmene „M“

ex - velikost 1ex odpovídá výšce malého písmene „x“

Jednotky „em“ a „ex“ závisí na aktuální velikosti písma a použitém fontu.

px - velikost 1px (pixel) představuje jeden bod obrazovky (velikost pixelu

se liší na růžných zobrazovacích zařízeních).

Příklad použití: line-height: 2.5em; font-size: 24px;

Délkové jednotky – absolutní jednotyDélkové jednotky – absolutní jednoty

Absolutní jednotky používáme např. pro tisk (známe velikost papíru).

mm - milimetry

cm - centimetry

in – anglický palec (1inch = 2.54cm)

pt – typografický bod (v CSS platí 72pt = 1in)

pc – typografická jednotka „pica“ (12pc = 1pt)

V praxi se používají (mají dobrou podporu v prohlížečích) zejména pt ve

stylových předpisech určených k výstupu na tiskárnu.

Délkové jednotky – procentaDélkové jednotky – procenta

Procentuální hodnoty se vždy vztahují k jiné hodnotě.

Příklady použití:

Výška řádku (line-height) se vztahuje k velikosti písma (font-size).

line-height: 150%; znamená, že výška řádku bude větší o 50%, než je

velikost fontu (při výšce fontu 10px bude výška řádku 15px).

Je-li šířka objektu 50% (width: 50%;), zabere přesně polovinu šířky

okna prohlížeče.

Délkové jednotky – procentaDélkové jednotky – procenta

CSS:

p.sirka50 { width: 50%; }

(X)HTML:

<p class="sirka50">Lorem ipsum dolor…</p>

100%

50%


Relativní jednotky zobrazovací jednotky

Absolutní jednotky tiskové jednotky

Písmo v CSSPísmo v CSS

Font (rodinu) písma nastavujeme pomocí CSS vlastnosti font-family.

Hodnotou je název konkrétního fontu písma (např. Arial, Verdana), lze

uvést náhradní font pro případ, že původní není v prohlížeči k dispozici.

Je možné uvést také obecnou rodinu písma:

serif: patkové písmo (např. Times New Roman)

sans-serif: bezpatkové písmo (např. Arial, Verdana, Helvetica)

monospace: neproporciální písmo (např. Courier, Courier New)

cursive: ozdobná kurzíva (např. Comic Sans)

fantasy: ozdobné písmo (např. Western)

Příklad: body { font-family: Arial, Helvetica, sans-serif }


DUKTUS (tučnost) PÍSMA

CSS vlastnost font-weight (elementy: blokové, řádkové)

Hodnoty: normal, bold (tučné)

- Existují i další hodnoty (bolder, lighter, 100, 400, 700, 900), prohlížeče

je však neumí správně interpretovat.

STYL PÍSMA

CSS vlastnost font-style (elementy: blokové, řádkové)

Hodnoty: normal, italic (kurzíva), oblique (skloněné písmo)


VELIKOST PÍSMA

CSS vlastnost font-size (elementy: blokové, řádkové)

Hodnoty: xx-small, x-small, small, medium, large, x-large, xx-large

Délkové jednotky: %, px, em, ex, pt, nevhodné: mm, cm, in

Příklad použití:

p.velky { font-size: large; }

.pozn { font-size: 12px; }

<p class="velky">Velký text</p>

<span class="pozn">Poznámka</span>

Text v CSSText v CSS

ZAROVNÁNÍ TEXTU

CSS vlastnost text-align (elementy: blokové)

Hodnoty: left (vlevo), right (vpravo), center (střed), justify (blok)

ODSAZENÍ TEXTU

CSS vlastnost text-indent (elementy: blokové)

Hodnoty: číselný údaj + relativní délková jednotka (px, em, ex)



CSS

p.textik { text-indent: 50px; text-align: justify; }

HTML

<p class="textik">Lorem ipsum dolor…</p>


MEZERY MEZI JEDNOTLIVÝMI ZNAKY

CSS vlastnost letter-spacing (elementy: blokové, řádkové)


MEZERY MEZI JEDNOTLIVÝMI SLOVY

CSS vlastnost word-spacing (elementy: blokové, řádkové)



p.mezera-znaky { letter-spacing: 7px; }

<p class="mezera-znaky">Mezi jednotlivými znaky jsou…</p>

p.mezera-slova { word-spacing: 30px; }

<p class="mezera-slova">Mezi jednotlivými slovy jsou…</p>


MEZERY MEZI JEDNOTLIVÝMI ŘÁDKY

CSS vlastnost line-height (elementy: blokové, řádkové)


p.mezera-radky { line-height: 5em; }

<p class="mezera-radky">Lorem ipsum dolor…</p>

} 5em

} 5em


ZAROVNÁNÍ NA VÝŠKU (vertikální zarovnání)

CSS vlastnost vertical-align (elementy: řádkové)

Základní hodnoty zarovnání:

baseline - na řádek

bottom - na spodní okraj (např. buňka tabulky)

middle - na střed (např. buňka tabulky)

top - na horní okraj (např. buňka tabulky)

sub - dolní index

super - horní index

číslo % - v procentech výšky řádku (např. 50% nebo -20%)


vertical-align: super

vertical-align: sub


.hindex { vertical-align: super; }

.dindex { vertical-align: sub; }

<p>

S<span class="dindex">1</span> = 200m<span

class="hindex">2</span>

</p>


vertical-align: top


td.nahore { vertical-align: top; }

td.dole { vertical-align: bottom; }

vertical-align: bottom

V definici příslušné buňky tabulky:

<td class="nahore">text1</td>

<td class="dole">text2</td>


DEKORACE TEXTU

CSS vlastnost text-decoration (elementy: blokové, řádkové)

Hodnoty:

overline - vodorovná čára nad textem

line-through - přeškrtnutý text

underline - podtržený text

none – text bez dekorace (např. zrušení podtržení u odkazů)


text-decoration: overline

text-decoration: line-through

text-decoration: underline

text-decoration: none


a.nepodtrzeny { text-decoration: none; }

<a href="stranka.htm" class="nepodtrzeny">Tento odkaz není podtržený.</a>


DEKORACE TEXTU

CSS vlastnost text-transform (elementy: blokové, řádkové)

Hodnoty:

capitalize – první písmena slov velká

uppercase – všechna písmena velká

lowercase – všechna písmena malá

none – text bez změny


text-transform: capitalize

text-transform: uppercase

text-transform: lowercase


p.velka-pismena { text-transform: uppercase; }

<p class="velka-pismena">toto je nějaký text.</a>

Hypertextový odkaz v CSSHypertextový odkaz v CSS

BARVA ODKAZU

Standardně se nenavštívený odkaz v prohlížeči zobrazuje modrý.

Barvu odkazu lze změnit stejně jako okolní text CSS vlastností color.

DEKORACE ODKAZU

Standardně se odkaz zobrazuje podtržený.

Je-li potřeba podtržení změnit (např. v menu zrušit), použijeme CSS

vlastnost text-decoration.

Příklad (červený, nepodtržený odkaz):

a.menu { color: #f00; text-decoration: none; }

Hypertextový odkaz v CSSHypertextový odkaz v CSS

PSEUDOTŘÍDY

Slouží k odlišnému definování vlastností hypertextových odkazů:

Nenavštívený odkaz:

a:link { color: blue; }

Navštívený odkaz:

a:visited { color: purple; }

Odkaz při kliknutí myší:

a:active { color: red; }

Odkaz pří najetí kurzorem myši:

a:hover { text-decoration: none; }

Mezi názvem elementu a pseudotřídou je dvojtečka. (a:hover)

Odrážky seznamů v CSSOdrážky seznamů v CSS

NEČÍSLOVANÉ SEZNAMY

CSS vlastnost list-style-type

Hodnoty:

disc (vyplněné kolečko)

circle (prázdné kolečko)

square (vyplněný čtvereček)


ul { list-style-type: circle; }


ČÍSLOVANÉ SEZNAMY

CSS vlastnost list-style-type

Hodnoty:

decimal – arabské číslice (1.)

lower-roman – malé římské číslice (i.)

upper-roman – velké římské číslice (I.)

lower-alpha – malá písmena (a.)

upper-alpha – velká písmena (A.)


ol { list-style-type: upper-alpha; }

Existují i jiné hodnoty, nejsou však

plně podporovány všemi prohlížeči.


OBRÁZKOVÁ ODRÁŽKA

CSS vlastnost list-style-image

Hodnotou je odkaz na obrázek

představující odrážku.

Obrázková odrážka by měla mít výšku

úměrnou výšce textu.


ul { list-style-image: url("obrazky/kvetinka.gif"); }

Rozměry blokových objektůRozměry blokových objektů

Pro určení rozměrů blokových elementů existují CSS vlastnosti:

width (šířka)

height (výška)

Pro určení výšky a šířky lze použít délkové jednotky (především px, %)

Lze aplikovat na všechny blokové elementy, např.:

blokový element <div>, nadpisy, odstavce, tabulky, atd.



#ramecek { width: 300px; height: 100px; border: 1px solid #f00;}

<div id="ramecek">Pokusný text</div>

300px

100px



p.sirka50 { width: 50%; }

<p class="sirka50">Lorem ipsum dolor…</p>

50% šířky stránky

Rámečky v CSSRámečky v CSS

CSS vlastnost border (elementy: blokové, řádkové)

Určuje všechny vlastnosti rámečku najednou.

.ramecek { border: 1px solid #f00; }

Vlastnosti rámečku lze definovat také jednotlivě:

border-width (šířka rámečku)

border-style (styl rámečku)

border-color (barva rámečku)

.ramecek { border-width: 1px; border-style: solid; border-color: #f00; }

Používáme tehdy, chceme-li určit pouze některé vlastnosti rámečku


Hodnoty vlastnosti border-width (šířka rámečku)

Šířku rámečku určujeme převážně v pixelech (px)

Hodnoty vlastnosti border-style (styl rámečku)

none groove

dotted ridge

dashed inset

solid outset

double


Vlastnosti rámečku lze určit zvlášť pro:

levý okraj (left)

pravý okraj (right)

horní okraj (top)

spodní okraj (bottom)

Zápis CSS vlastnosti vypadá například takto:

border-left: 2px dotted #f00;

Zápis pro vybranou CSS vlastnost vypadá například takto:

border-left-width: 2px;

border-left-style: dotted;

border-left-color: #f00;

left

top

bottom

right


.ramecek { border: 2px dotted #00f; }

<p class="ramecek">Modrý, tečkovaný rámeček šířky 2 pixely.</p>

.ram-nahore { border-top: 2px solid #f00; }

<p class="ram-nahore">Červený plný horní rám, šířka 2 pixely.</p>


Rámečky lze aplikovat na všechny objekty,

především se používají u blokových:

odstavce, tabulky, bloky DIV, nadpisy, atd.

Pozadí v CSSPozadí v CSS

CSS vlastnost background (elementy: blokové, řádkové)

Umožňuje vytvořit pozadí stránky nebo (X)HTML elementu:

background-color (barva na pozadí)

background-image (obrázek na pozadí)

backgroud-repeat (opakování obrázku na pozadí)

background-position (umístění pozadí)


CSS vlastnost background-color

Příklad použití: body { background-color: #aaa; }

(Barva na pozadí stránky bude světle šedá)

Ukázka: p.sedy { background-color: #aaa; }

<p class="sedy">Odstavec s šedým pozadím.</p>


CSS vlastnost background-image


.pozadi-obr { background-image: url("motyl.gif"); height: 120px; }

<div class="pozadi-obr">Obrázek na pozadí.</div>

Použitý obrázek


CSS vlastnost background-repeat. Umožňuje / zabraňuje opakování

obrázku na pozadí.

Hodnoty:

no-repeat (bez opakování)

repeat-x (opakování v ose x, tedy vodorovně)

repeat-y (opakování v ose y, tedy svisle)

backgroud-repeat: no-repeat;


CSS vlastnost background-position určuje pozici obrázku na pozadí.

Vždy se uvádí dvě hodnoty: pro osu x (vodorovně), y (svisle):

background-position: x y;

1. Hodnoty zadány slovně

top

center

bottom

centerleft right



.pozadi-obr { height: 200px; background-image: url("motyl.gif");

background-repeat: no-repeat; background-position: center top; }

<div class="pozadi-obr">Obrázek na pozadí.</div>

Obrázek na pozadí

je umístěn:

osa X: uprostřed

osa Y: nahoře


2. Hodnoty zadány číselně

Hodnoty pro umístění obrázku na pozadí v ose x, y lze zadat:

- procentuálně (%)

- pixely (px)

0%

50%

100%

50%0% 100%

Příklad použití

background-position: 50% 0%

Číselné hodnoty umožňují

precizně umístit obrázek na

pozadí

Konec modulu TWS_03b

Děkuji Vám za pozornost.

tvorba webovÝch strÁnek

Documents