Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy,

Transkript

1 Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy,

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

3 Vlastnosti textu color, font-family, font-size, text-align, textindent font-weight, font-style, font-variant, letter-spacing text-align Vlastnosti pozadí background-color, background-image, background-repeat, background-attachement, background-position

4 <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 <p></p> párový tag Zalamování řádku <br> - HTML nepárový tag, bez obsahu př.: priklad-odstavce.html

6 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 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 RGBA RGB + úroveň neprůhlednosti úroveň neprůhlednosti: = 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 nový způsob zápisu barvy H hue odstín hodnoty: (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 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 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 určuje velikost písma hodnoty 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 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 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 určuje odsazení prvního řádku textu v bloku hodnoty "velikost", "procenta", inherit výchozí hodnota 0 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 <strong> párový tag důležitý text <em> párový tag mírný důraz <b> párový tag část textu, na kterou chceme upoutat pozornost, ale bez důrazu <i> párový tag čá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 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 až 900 nastaví absolutní hodnotu od nejtenčí po nejsilnější př.: font-weight.html

18 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 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 určuje vzdálenost jednotlivých znaků textu (prostrkání) hodnoty normal, "velikost", inherit výchozí hodnota normal význam hodnot normal 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 <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 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 <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 hodnoty: ftp://adresa mailto: ová adresa př. : priklad-odkazy.html

25 č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 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 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 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 <!-- --> text, část stránky (i s kódem) nebude zobrazena př.: priklad-komentare.html

30 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 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 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 repeat 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 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 scroll 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 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 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 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 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 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 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 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 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 umístění středu 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 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+