Tvorba webov ch str nek
This presentation is the property of its rightful owner.
Sponsored Links
1 / 75

TVORBA WEBOVÝCH STRÁNEK PowerPoint PPT Presentation


  • 129 Views
  • Uploaded on
  • Presentation posted in: General

TVORBA WEBOVÝCH STRÁNEK. Výukový modul TWS_03bIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE. Osnova výukového modulu TWS_03b. Kaskádové styly (CSS) Vazba CSS na (X)HTML dokument Syntaxe CSS Barva a délkové jednotky v CSS Formátování obsahu a struktury (X)HTML dokumentu.

Download Presentation

TVORBA WEBOVÝCH STRÁNEK

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Tvorba webov ch str nek

TVORBA WEBOVÝCH STRÁNEK

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


Osnova v ukov ho modulu tws 03b

Osnova výukového modulu TWS_03b

  • Kaskádové styly (CSS)

  • Vazba CSS na (X)HTML dokument

  • Syntaxe CSS

  • Barva a délkové jednotky v CSS

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


Kask dov styly css

KASKÁDOVÉ STYLY (CSS)


Vod do kask dov ch styl

Úvod do kaskádových stylů

  • Kaskádové styly z anglického CascadingStyle 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 dokument

Vazba na (X)HTML dokument

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

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

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

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


Vazba na x html dokument1

Vazba na (X)HTML dokument

  • 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.


Vazba na x html dokument2

Vazba na (X)HTML dokument

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

<head>

<styletype="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.


Vazba na x html dokument3

Vazba na (X)HTML dokument

  • 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.


Vazba na x html dokument4

Vazba na (X)HTML dokument

  • 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; }


Vazba na x html dokument5

Vazba na (X)HTML dokument

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

  • Pro připojení stylového předpisuk 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>


Vazba na x html dokument6

Vazba na (X)HTML dokument

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

  • 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>

Hodnota CSS vlastnosti

CSS vlastnost


Syntaxe kask dov ch styl1

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 selektor

HTML 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 selektor

CSS 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>


Css t da jako selektor1

CSS třída jako selektor

Příklad: Obsah souboru styly.css

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

<head>

… obsah hlavičky webové stránky …

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

</head>

<body>

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

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

</body>


Css t da jako selektor2

CSS třída jako selektor

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

  • Text druhého odstavce nebude ovlivněn.


Css t da jako selektor3

CSS třída jako selektor

Příklad: Obsah souboru styly.css

.cervene { color: #f00; }

<head>

… obsah hlavičky webové stránky …

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

</head>

<body>

<p>Text v odstavci. <span class="cervene">Toto bude červené.</span>A tento text už zase ne.</p>

</body>


Css t da jako selektor4

CSS třída jako selektor

  • 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ř. <h1až 6>, <p>, <div>, <blockquote>, <br>, <hr>) !!!


U ite n tip

Užitečný tip:

Chceme-li jeden (X)HTML elementformátovat více způsoby na jedné stránce, použijeme selektor třídy.


Css identifik tor jako selektor

CSS 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:<divid="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


Css identifik tor jako selektor1

CSS identifikátor jako selektor

Příklad: Obsah souboru styly.css

#ramecek { width: 200px; height: 70px; border: 3px #f90 solid; background-color: #ffc; text-align: center; font-size: 23px;}

Šíř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

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

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


Css identifik tor jako selektor2

CSS identifikátor jako selektor

  • 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.


U ite n tip1

Užitečný tip:

CSS identifikátory se využívají převážněpro tvorbu webdesignu pomocístylů a (X)HTML elementu <div> </div>


Barvy v css

Barvy 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 css

Zápis barvy v CSS

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

Například: p {color:blue;}

zdroj: www.webtvorba.cz

  • 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ě.


Z pis barvy v css1

Zápis barvy v CSS

  • RGB zápis barvy

  • 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%); }


Z pis barvy v css2

Zápis barvy v CSS

  • RGB zápis barvy

  • Desítkové vyjádření

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

  • Příklad použití ve stylovém předpisu:p{color: rgb(255,0,0); }#ramecek{border-color: rgb(128,128,128); }


Z pis barvy v css3

Zápis barvy v CSS

  • RGB zápis barvy

  • Š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říklad použití ve stylovém předpisu: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 pspadu

Vý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 pspadu1

Vý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) nastavitpožadovaný odstín, poté lze číselný kódbarvy 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 jednotky

Dé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 jednoty

Dé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 jednoty

Dé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 procenta

Dé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 procenta1

Délkové jednotky – procenta

CSS:

p.sirka50 { width:50%; }

(X)HTML:

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

50%

100%


U ite n tip2

Užitečný tip:

Relativní jednotky  zobrazovací jednotky

Absolutní jednotky  tiskové jednotky


P smo v css

Pí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ř. ComicSans) fantasy: ozdobné písmo (např. Western)

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


P smo v css1

Písmo v CSS

  • 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)


P smo v css2

Písmo v CSS

  • 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><spanclass="pozn">Poznámka</span>


Text v css

Text 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)


Text v css1

Text v CSS

Příklad použití:

CSS

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

HTML

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


Text v css2

Text v CSS

  • MEZERY MEZI JEDNOTLIVÝMI ZNAKY

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

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

  • MEZERY MEZI JEDNOTLIVÝMI SLOVY

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

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


Text v css3

Text v CSS

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>


Text v css4

Text v CSS

  • MEZERY MEZI JEDNOTLIVÝMI ŘÁDKY

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

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

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

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

}5em

}5em


Text v css5

Text v CSS

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

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

  • Základní hodnoty zarovnání:baseline - na řádekbottom-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í indexsuper - horní index číslo % - v procentech výšky řádku (např. 50% nebo -20%)


Text v css6

Text v CSS

vertical-align:super

vertical-align:sub

Příklad použití:

.hindex { vertical-align:super; }

.dindex { vertical-align:sub; }

<p> S<spanclass="dindex">1</span> = 200m<spanclass="hindex">2</span></p>


Text v css7

Text v CSS

vertical-align:top

vertical-align:bottom

Příklad použití:

td.nahore { vertical-align:top; }

td.dole { vertical-align:bottom; }

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

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

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


Text v css8

Text v CSS

  • DEKORACE TEXTU

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

  • Hodnoty: overline- vodorovná čára nad textemline-through-přeškrtnutý textunderline- podtržený textnone– text bez dekorace (např. zrušení podtržení u odkazů)


Text v css9

Text v CSS

text-decoration:overline

text-decoration:line-through

text-decoration:underline

text-decoration:none

Příklad použití:

a.nepodtrzeny { text-decoration: none; }

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


Text v css10

Text v CSS

  • 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 v css11

Text v CSS

text-transform:capitalize

text-transform:uppercase

text-transform:lowercase

Příklad použití:

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

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


Hypertextov odkaz v css

Hypertextový 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 css1

Hypertextový 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 css

Odráž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)Příklad použití: ul{ list-style-type: circle;}


Odr ky seznam v css1

Odrážky seznamů v CSS

  • ČÍ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.) Příklad použití: ol{ list-style-type: upper-alpha;}

Existují i jiné hodnoty, nejsou však plně podporovány všemi prohlížeči.


Odr ky seznam v css2

Odrážky seznamů v CSS

  • 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.Příklad použití: 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.


Rozm ry blokov ch objekt1

Rozměry blokových objektů

Příklad použití:

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

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

100px

300px


Rozm ry blokov ch objekt2

Rozměry blokových objektů

Příklad použití:

p.sirka50{ width: 50%;}

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

50% šířky stránky


R me ky v css

Rámečky v CSS

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

  • Určuje všechny vlastnosti rámečku najednou..ramecek{border:1pxsolid#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


R me ky v css1

Rámečky v CSS

  • 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)nonegroovedottedridgedashedinsetsolidoutsetdouble


R me ky v css2

Rámečky v CSS

  • 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;

top

left

right

bottom


Tvorba webov ch str nek

Rámečky v CSS

.ramecek { border: 2pxdotted#00f;}

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

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

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


U ite n tip3

Užitečný tip:

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 css

Pozadí 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í)


Pozad v css1

Pozadí v CSS

  • CSS vlastnost background-colorPří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>


Pozad v css2

Pozadí v CSS

  • CSS vlastnost background-imagePříklad použití:.pozadi-obr{ background-image: url("motyl.gif"); height: 120px; }<div class="pozadi-obr">Obrázek na pozadí.</div>

Použitý obrázek


Pozad v css3

Pozadí v CSS

  • 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;


Pozad v css4

Pozadí v CSS

  • CSS vlastnost background-positionurčuje pozici obrázku na pozadí.

  • Vždy se uvádí dvě hodnoty: pro osu x (vodorovně), y (svisle):background-position: xy;1. Hodnoty zadány slovně

center

right

left

top

center

bottom


Pozad v css5

Pozadí v CSS

Příklad použití:

.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ředosa Y: nahoře


Pozad v css6

Pozadí v CSS

2. Hodnoty zadány číselněHodnoty pro umístění obrázku na pozadí v ose x, y lze zadat: - procentuálně (%)- pixely (px)

50%

100%

0%

0%

Příklad použitíbackground-position: 50% 0%

Číselné hodnoty umožňují precizně umístit obrázek na pozadí

50%

100%


Konec modulu tws 03b d kuji v m za pozornost

Konec modulu TWS_03bDěkuji Vám za pozornost.


  • Login