Mgr. Vlastislav Kučera lekce č. 3

Prezentace na téma: "Mgr. Vlastislav Kučera lekce č. 3"— Transkript prezentace:

1 Mgr. Vlastislav Kučera lekce č. 3
PGWE1 Mgr. Vlastislav Kučera lekce č. 3

2 Obsah přednášky Nadpisy Odstavce, zalamování řádku Zvýraznění textu
Obrázky Odkazy Bloky, označené části řádku Komentáře

3 Obsah přednášky Vlastnosti textu Vlastnosti pozadí
color, font-family, font-size, text-align, text- indent font-weight, font-style, font-variant, letter-spacing text-align Vlastnosti pozadí background-color, background-image, background-repeat, background-attachement, background-position

4 Nadpisy <h1></h1> ... <h6></h6>
párové tagy, zobrazují se tučně H1 – 2 x větší než okolní text H2 – 1,5 x H3 – 1,17 x H4 – stejně jako okolní text H5 – 0,83 x H6 – 0,67 x hodnoty se můžou v jednotlivých prohlížečích lišit př.: priklad-nadpisy.html

5 Odstavce, zalamování řádku
<p></p> párový tag Zalamování řádku <br /> - XHTML, <br> - HTML nepárový tag, bez obsahu př.: priklad-odstavce.html

6 Vlastnost color určuje barvu popředí textového obsahu prvku hodnoty
"barva", inherit výchozí hodnota závisí na klientovi, resp. uživ. nastavení význam hodnot barva – určuje barvu př. - priklad-color.html

7 CSS – definice barev buď klíčovým slovem nebo tzv. číselnou RGB notací
klíčovým slovem je definováno 16 základních barev a názvy určitých objektů operačního systému 16 barev: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow číselné vyjádření hexadecimálně musí začínat #; př: #ffddaa (= #fda); #1a2b3c dekadicky rgb(255,0,0) rgb(100%, 50%, 25%)

8 Definice barev v CSS3 - RGBA
RGB + úroveň neprůhlednosti úroveň neprůhlednosti: 0 – 1 0 = 0% - plně průhledná 1 = 100% - neprůhledná jenom pomocí zápisu v desítkové soustavě: rgba(r,g,b,a) podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

9 Definice barev v CSS3 – HSL, HSLA
nový způsob zápisu barvy H – hue – odstín hodnoty: 0 – 359 (0 – červená, 60 – žlutá, 120 – zelená, 180 – azurová, 240 modrá, fialová) S – saturation – sytost hodnoty: v procentech, 100% - plná sytost, 0% - žádná sytost L – lightness – světelnost hodnoty: v procentech, 100% - bílá, 50% - aktuální odstín, 0% - černá HSLA = HSL + neprůhlednost – stejné jako u RGBA podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

10 Neprůhlednost barvy opacity hodnoty – stejné jako RGBA – 0 – 1
podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+ opacity je dědičná vlastnost

11 Vlastnost font-family
určuje rodinu písma, nebo typové písmo, kterým bude vykreslen text prvku hodnoty <název písma> <typ písma> inherit výchozí hodnota závisí na klientovi, resp. uživatelském rozhraní př. font-family.html

12 Vlastnost font-size určuje velikost písma hodnoty výchozí hodnota
xx-small, x-small, small, medium large, x-large, xx-large larger, smaller "velikost", "procenta", inherit výchozí hodnota medium význam hodnot xx-small – nejmenší písmo – absolutní velikost podle tabulky velikosti písem sestavené a udržované klientem xx-large – největší písmo smaller – menší písmo – relativní určení velikosti na základě tabulky velikostí klienta a velikosti písma rodičovského prvku larger – větší písmo "velikost" – hodnota určuje absolutní velikost písma nezávisle na tabulce "procenta" - hodnota určuje absolutní velikost písma relativní vzhledem k velikosti písma rodičovského prvku

13 CSS – definice číselných hodnot
zapisují se vždy v desítkové soustavě !! při použití desetinných čísel se místo desetinné čárky (,) používá tečka (.) !! velikost relativní jednotky em – velikost příslušného písma ex – střední výška příslušného písma px – pixely (obrazové body) absolutní jednotky pt – typografické body – používá se zejména ve stylech určených pro tiskárny !! mezi číslem a jednotkou nesmí být mezera !!

14 Vlastnost text-align určuje horizontální zarovnávání řádkového obsahu blokových prvků hodnoty left, right, center, justify, inherit výchozí hodnota závisí na klientovi, resp. uživ. nastavení a směru psaní význam hodnot left – obsah se zarovná vlevo right – obsah se zarovná vpravo center – obsah se horizontálně vystředí justify – obsah se zarovná na obě strany (tzv. do bloku) př. - priklad-text-align.html

15 Vlastnost text-indent
určuje odsazení prvního řádku textu v bloku hodnoty "velikost", "procenta", inherit výchozí hodnota význam hodnot velikost – odsazení je pevné velikosti procenta – velikost odsazení je udána v procentech z šířky obsahujícího bloku př. - priklad-text-indent.html

16 Zvýraznění textu <strong> <em> <b> <i>
párový tag důležitý text <em> mírný důraz <b> část textu, na kterou chceme upoutat pozornost, ale bez důrazu <i> část textu vyjadřující názor, postoj, .. <strong> a <em> - syntezátor hlasu mění parametry syntézy (hlasitost, výška, rychlost) př.: priklad-zvyrazneni_textu.html

17 Vlastnost font-weight
určuje sílu písma hodnoty normal, bold, bolder, lighter, inherit 100, 200, 300, 400, 500, 600, 700, 800, 900 výchozí hodnota normal význam hodnot normal – nastaví normální sílu písma; odpovídá 400 bold – nastaví tučné písmo; odpovídá 700 bolder – nastaví písmo o stupeň tučnější než je zděděná; nesmí překročit hodnotu 900 lighter – nastaví písmo o stupeň méně tučné než je zděděná; nesmí překročit hodnotu 100 100 až 900 – nastaví absolutní hodnotu od nejtenčí po nejsilnější př.: font-weight.html

18 Vlastnost font-style nastavuje řez (styl) písma hodnoty
normal, italic, oblique, inherit výchozí hodnota normal význam hodnot italic – nastaví řez italica (kursiva); pokud není k dispozici, vykreslí se stejně jako oblique oblique – nastaví řez oblique, pokud je k dispozici; může se jednat i o automaticky generované šikmé písmo př.: font-style.html

19 Vlastnost font-variant
umožňuje nastavit tzv. kapitálky vlastnost lze použít jen na rodiny písem, které rozlišují mínusky (malá písmena) a verzálky (velká písmena) hodnoty normal, small-caps, inherit výchozí hodnota normal význam hodnot normal – nastaví normální písmo small-caps – nastaví kapitálky př.: font-variant.html

20 Vlastnost letter-spacing
určuje vzdálenost jednotlivých znaků textu (prostrkání) hodnoty normal, "velikost", inherit výchozí hodnota normal význam hodnot normální vzdálenost znaků odpovídající danému písmu "velikost" hodnota, která se přičte k implicitní vzdálenosti mezi znaky textu i záporné hodnoty př.: letter-spacing.html

21 Obrázky <img /> - XHTML, <img> - HTML nepárový tag
parametry: src – adresa souboru obrázku alt – alternativní text pro případ, že se obrázek nezobrazí př: <img src="obrazek.gif" alt="Náš první vložený obrázek"/> na veškeré další úkony (velikost, umístění, ohraničení, ...) se doporučuje požívat kaskádové styly př.: priklad-obrazky.html

22 Obrázky - doporučení formát: gif, jpeg, png
velikost souboru: čím menší, tím rychlejší načítání fotogalerie: vytvořit náhledové snímky (rozměry např. 128 x 96 px) a ty použít jako odkazy

23 Odkazy <a></a> párový tag parametry
href – adresa umístění web. stránky name – jmenný odkaz (kotva) accesskey – klávesová zkratka target – okno, kde se odkaz otevře př.: <a href="

24 Odkazy – parametr href hodnoty: př. : priklad-odkazy.html
ftp://adresa mailto: ová adresa př. : priklad-odkazy.html

25 Odkazy – parametr name častěji bývá označován jako jmenný odkaz nebo kotva odkaz: <a href="stranka.html#kotva">Kotva</a> na stránce potom bude na místě, kam se má stránka po klepnutí na odkaz nastavit <a name="kotva">Kotva</a> př.: priklad-odkazy.html, priklad-kotva.html

26 Odkazy – parametr accesskey
klávesová zkratka odkazu accesskey="1" přístup ALT+1, CTRL+1 ve Firefoxu se zmáčknutím kl. zkratky aktivuje odkaz v IE se na odkaz pouze zaměří, návštěvník musí ještě zmáčknout Enter v Opeře - Shift + ESC - objeví se seznam klávesových zkratek dané www stránky př.: priklad-odkazy.html

27 Odkazy – parametr target
přesměruje odkaz do specifického okna prohlížeče hodnoty parametru: _blank – nové okno jméno okna – rozdíl oproti _blank je ten, že při použití _blank se otevře vždy nové okno, zatímco při použití „jméno okna“ se otevře jenom poprvé a další odkazy se otevírají v tom daném okně

28 Vlastnost text-decoration
určuje ozdoby přidané k textu prvku hodnoty none, underline, overline, line-through, blink, inherit výchozí hodnota none význam hodnot underline podtržený text overline nad textem je vodorovná čára line-through přeškrtnutý text blink blikající text př.: text-decoration.html

29 Komentáře <!-- -->
<! > text, část stránky (i s kódem) nebude zobrazena př.: priklad-komentare.html

30 Vlastnost background-color
určuje barvu pozadí prvku hodnoty "barva", transparent, inherit výchozí hodnota transparent význam hodnot barva - určuje barvu transparent – nastavuje průhledné pozadí prvku, takže je skrze něj vidět pozadí i obsah prvků ležících vespod př. - priklad-background-color.html

31 Vlastnost background-image
určuje obrázek na pozadí; zobrazí se buď jednou nebo opakovaně v závislosti na hodnotě background-repeat hodnoty <adresa>, inherit, none výchozí hodnota none význam hodnot <adresa> - adresa obrázku; při použití relativní adresy-relativní cesta vzhledem k umístění stylového předpisu, nikoli dokumentu

32 Vlastnost background-repeat
určuje, zda a jak se bude obrázek na pozadí opakovat hodnoty repeat, repeat-x, repeat-y, no-repeat, inherit výchozí hodnota repeat význam hodnot obrázek se opakuje horizontálně i vertikálně repeat-x horizontální opakování repeat-y vertikální opakování no-repeat obrázek se neopakuje

33 Vlastnost background-attachment
určuje, zda je obrázek na pozadí nezávislý na posunu stránky, nebo zdali se posouvá spolu se stránkou hodnoty scroll, fixed, inherit výchozí hodnota scroll význam hodnot obrázek roluje s dokumentem, tj. mění pozici vzhledem k průhledu, nikoli vzhledem k ostatním prvkům dokumentu fixed obrázek je fixován vzhledem k průhledu

34 Vlastnost background-position
určuje počáteční polohu obrázku na pozadí hodnoty "procenta", "velikost" top, center, bottom, left, inherit výchozí hodnota 0% 0% význam hodnot "procenta" 0% 0% - levý horní roh obrázku bude umístěn na levý horní roh hrany výplně boxu 100% 100% - pravý dolní roh obrázku bude umístěn na pravý dolní roh hrany výplně "velikost" př.: 10px 5px levý horní roh obrázku bude posunut od levého horního rohu boxu o zadané hodnoty

35 Vlastnost background-position
význam hodnot top left = left top totéž jako 0% 0% top, top center = center top 50% 0% left, left center =center left 0% 50% center 50% 50% right, right center = center right 100% 50% bottom, bottom center = center bottom 50% 100% ... př.: background-fixed.html, background-scroll.html

36 Vícenásobná pozadí můžeme definovat více obrázků (barev) na pozadí
jednotlivé obrázky (barvy) oddělujeme čárkou př.: background-image: url(obrazek1.png), url(obrazek2.png) obrazek1.png bude umístěn nad obrazek2.png podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

37 Vícenásobná pozadí upravena i background-position
můžeme definovat pozice pro každý obrázek pozici každého obrázku oddělujeme čárkou pokud nedefinujeme – obrázky se zobrazují z levého horního rohu

38 Background-size měníme velikost obrázku hodnoty:
cover – obrázek vyplní celou plochu contain – obrázek se zobrazí celý rozměry – vertikální horizontální pří více obrázcích: jednotlivé definice oddělujeme čárkou podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

39 lineární gradienty linear-gradient
definuje se směr gradientu, barvy obsažené v gradientu směr: úhel, strana nebo roh odkud se má začínat barvy: kód barvy + procento nebo délka, jak daleko podél gradientu bude barva umístěna podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+

40 lineární gradienty – příklady
linear-gradient(270deg, #abc 0%, #fff 100%) odshora dolů 270deg = top top – výchozí hodnota pro směr 0% - výchozí hodnota pro délku začínající barvy 100% - výchozí hodnota pro koncovou barvu strany, rohy: top, right, bottom, left úhly: 0deg – doprava, 90deg – nahoru, 180deg – doleva, 270deg - dolů linear-gradient(45deg, #00f 25%, #f00 25%, #ff0 75%, #080 75%) ostré hrany mezi barvami

41 radiální gradienty kruhové nebo elipsovité radial-gradient
umístění středu, tvar velikost, počáteční, koncová barva podobně jako u lineárních gradientů můžeme definovat dosah barev podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+

42 radiální gradienty umístění středu tvar velikost
výchozí hodnota: center př.: 50px 25px, … tvar výchozí hodnota: ellipse circle velikost výchozí hodnota: cover – tvar gradientu dosahuje až ke straně boxu, která je nejdále od středu contain – tvar gradientu dosahuje od středu k nejbližšímu rohu boxu closet-side – podobně jako cover, ale dosahuje k nejbližší hraně středu

43 Opakování gradientů pro případ, že chceme gradienty opakovat
repeating-linear-gradient repeating-radial-gradient podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+