Mgr. Vlastislav Kučera

Nadpisy, odstavce, odkazy, …

Nadpisy

Odstavce, zalamování řádku

Zvýraznění textu

Obrázky

Odkazy

Bloky, označené části řádku

Komentáře

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

<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◦ <p></p>

◦ párový tag

Zalamování řádku◦ <br> - HTML

◦ nepárový tag, bez obsahu

př.: priklad-odstavce.html

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

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

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+

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+

opacity

hodnoty – stejné jako RGBA – 0 – 1◦ podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

opacity je dědičná vlastnost

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

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

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

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

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

<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

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

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

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

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

<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

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

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

hodnoty:◦ http://adresa

◦ ftp://adresa

◦ mailto:e-mailová adresa

př. : priklad-odkazy.html

č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

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

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ě

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

<!-- -->

text, část stránky (i s kódem) nebude zobrazena

př.: priklad-komentare.html

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

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

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

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

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

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

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+

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

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+

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+

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

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+

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

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+