Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Mgr. Vlastislav Kučera přednáška č. 3.  Nadpisy  Odstavce, zalamování řádku  Zvýraznění textu  Obrázky  Odkazy  Bloky, označené části řádku  Komentáře.

Podobné prezentace


Prezentace na téma: "Mgr. Vlastislav Kučera přednáška č. 3.  Nadpisy  Odstavce, zalamování řádku  Zvýraznění textu  Obrázky  Odkazy  Bloky, označené části řádku  Komentáře."— Transkript prezentace:

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

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, 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 ...  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.htmlpriklad-nadpisy.html

5  Odstavce ◦ ◦ blokový, párový tag  Zalamování řádku ◦ - XHTML, - HTML ◦ nepárový tag, bez obsahu  př.: priklad-odstavce.htmlpriklad-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.htmlpriklad-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  určuje rodinu písma, nebo typové písmo, kterým bude vykreslen text prvku  hodnoty ◦ ◦ inherit  výchozí hodnota ◦ závisí na klientovi, resp. uživatelském rozhraní  př. font-family.htmlfont-family.html

9  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

10  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  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.htmlpriklad-text-align.html

12  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.htmlpriklad-text-indent.html

13  tučně ◦, ◦ řádkový, párový tag  kurzíva ◦, ◦ řádkový, párový tag  a - 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, používají kaskádové styly  př.: priklad-zvyrazneni_textu.htmlpriklad-zvyrazneni_textu.html

14  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.htmlfont-weight.html

15  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.htmlfont-style.html

16  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.htmlfont-variant.html

17  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.htmlletter-spacing.html

18  - XHTML, - HTML  řádkový, nepárový tag  parametry: ◦ src – adresa souboru obrázku ◦ alt – alternativní text pro případ, že se obrázek nezobrazí  př:  na veškeré další úkony (velikost, umístění, ohraničení,...) se doporučuje požívat kaskádové styly  př.: priklad-obrazky.htmlpriklad-obrazky.html

19  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   řá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ř.: UHK

21  hodnoty: ◦ ◦ ftp://adresa ftp://adresa ◦ mailto: ová adresa  př. : priklad-odkazy.htmlpriklad-odkazy.html

22  častěji bývá označován jako jmenný odkaz nebo kotva  odkaz: ◦ Kotva  na stránce potom bude na místě, kam se má stránka po klepnutí na odkaz nastavit ◦ Kotva  př.: priklad-odkazy.html, priklad-kotva.htmlpriklad-odkazy.htmlpriklad-kotva.html

23  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.htmlpriklad-odkazy.html

24  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  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.htmltext-decoration.html

26  Bloky ◦ ◦ blokový, párový tag  Označené části řádku ◦ ◦ řádkový, párový tag  jejich hlavní využití je při používání CSS  př.: priklad-bloky.htmlpriklad-bloky.html

27   text, část stránky (i s kódem) nebude zobrazena  př.: priklad-komentare.htmlpriklad-komentare.html

28  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.htmlpriklad-background-color.html

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

30  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

31  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

32  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  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.htmlbackground-fixed.htmlbackground-scroll.html


Stáhnout ppt "Mgr. Vlastislav Kučera přednáška č. 3.  Nadpisy  Odstavce, zalamování řádku  Zvýraznění textu  Obrázky  Odkazy  Bloky, označené části řádku  Komentáře."

Podobné prezentace


Reklamy Google