PGWE 1 Mgr Vlastislav Kuera Nadpisy odstavce odkazy

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

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

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 ◦ background-color, background-image, background -repeat, background-attachement, backgroundposition

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

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

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

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); #1 a 2 b 3 c ◦ dekadicky �rgb(255, 0, 0) �rgb(100%, 50%, 25%)

Definice barev v CSS 3 - RGBA � RGBA RGB + ú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+ ◦ ◦ ◦

Definice barev v CSS 3 – 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á, 300 - fialová) �S – saturation – sytost �L – lightness – světelnost ◦ hodnoty: v procentech, 100% - plná sytost, 0% - žádná sytost ◦ hodnoty: v procentech, 100% - bílá, 50% - aktuální odstín, 0% - černá � HSLA RGBA = HSL + neprůhlednost – stejné jako u ◦ podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

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

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

Vlastnost font-size � � určuje velikost písma hodnoty ◦ ◦ � xx-small, medium large, x-large, xx-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

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

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 � význam hodnot ◦ závisí na klientovi, resp. uživ. nastavení a směru psaní ◦ ◦ 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

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

Zvýraznění textu � <strong> � <em> � <b> � <i> ◦ párový tag ◦ důležitý text ◦ párový tag ◦ mírný důraz ◦ párový tag ◦ část textu, na kterou chceme upoutat pozornost, ale bez důrazu ◦ 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 �

Vlastnost font-weight určuje sílu písma � hodnoty � ◦ normal, bolder, lighter, inherit ◦ 100, 200, 300, 400, 500, 600, 700, 800, 900 � výchozí hodnota � význam hodnot � př. : font-weight. html ◦ 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ší

Vlastnost font-style � nastavuje � hodnoty řez (styl) písma ◦ normal, italic, oblique, inherit � výchozí hodnota � význam hodnot ◦ normal ◦ 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

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 � význam hodnot ◦ normal – nastaví normální písmo ◦ small-caps – nastaví kapitálky � př. : font-variant. html

Vlastnost letter-spacing � určuje vzdálenost jednotlivých znaků textu (prostrkání) � hodnoty ◦ normal, "velikost", inherit � výchozí hodnota � 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

Obrázky � <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

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

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="http: //www. uhk. cz">UHK</a>

Odkazy – parametr href � hodnoty: ◦ http: //adresa ◦ ftp: //adresa ◦ mailto: e-mailová adresa � př. : priklad-odkazy. html

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

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

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ě

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

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

Vlastnost background-color � určuje barvu pozadí prvku � hodnoty ◦ "barva", transparent, inherit � výchozí hodnota � význam hodnot ◦ transparent ◦ 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

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 � význam hodnot ◦ none ◦ <adresa> - adresa obrázku; při použití relativní adresy-relativní cesta vzhledem k umístění stylového předpisu, nikoli dokumentu

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

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

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

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% ◦ right, right center = center right � 100% 50% ◦ bottom, bottom center = center bottom � 50% 100% ◦. . . � př. : background-fixed. html, background-scroll. html

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(obrazek 1. png), url(obrazek 2. png) ◦ obrazek 1. png bude umístěn nad obrazek 2. png � podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

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

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+

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+

lineární gradienty – příklady � linear-gradient(270 deg, ◦ ◦ ◦ #abc 0%, #fff 100%) odshora dolů 270 deg = 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: ◦ 0 deg – doprava, 90 deg – nahoru, 180 deg – doleva, 270 deg - dolů � linear-gradient(45 deg, 75%, #080 75%) ◦ ostré hrany mezi barvami #00 f 25%, #f 00 25%, #ff 0

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+

radiální gradienty � umístění středu ◦ výchozí hodnota: center ◦ př. : 50 px 25 px, … � 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

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+