Mgr. Vlastislav Kučera přednáška č. 3

Prezentace na téma: "Mgr. Vlastislav Kučera přednáška č. 3"— Transkript prezentace:

1 Mgr. Vlastislav Kučera přednáška č. 3
Tvorba www stránek Mgr. Vlastislav Kučera přednáška č. 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>
blokové, 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> blokový, 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 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

9 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

10 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 !!

11 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

12 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

13 Zvýraznění textu tučně kurzíva
<b></b>, <strong></strong> řádkový, párový tag kurzíva <i></i>, <em></em> <strong> a <em> - syntezátor hlasu mění parametry syntézy (hlasitost, výška, rychlost) pro větší kontrolu nad tučným písmem, resp. kurzívou se místo <b>, <i> používají kaskádové styly př.: priklad-zvyrazneni_textu.html

14 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

15 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

16 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

17 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

18 Obrázky <img /> - XHTML, <img> - HTML
řádkový, 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

19 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

20 Odkazy <a></a> řádkový, 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="

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

22 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

23 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

24 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ě

25 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

26 Bloky, označené části řádku
<div></div> blokový, párový tag Označené části řádku <span></span> řádkový, párový tag jejich hlavní využití je při používání CSS př.: priklad-bloky.html

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

28 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

29 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

30 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

31 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

32 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

33 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