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

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 Vlastnosti pozadí background-color, background-image, background-repeat, background-attachement, background-position

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

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

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

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%)

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+

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á, 300 - 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+

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

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

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

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

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

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

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

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

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

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: př. : priklad-odkazy.html 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 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

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

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

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

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

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

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

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+

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

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

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+