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, textindent ◦ font-weight, font-style, font-variant, letter-spacing ◦ text-align
Vlastnosti pozadí ◦ background-color, background-image, background-repeat, background-attachement, background-position
...
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árový tag
Zalamování řádku ◦
- 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:
číselné vyjádření
◦ aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow ◦ 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
S – saturation – sytost
L – lightness – světelnost
HSLA = HSL + neprůhlednost – stejné jako u RGBA
◦ hodnoty: 0 – 359 (0 – červená, 60 – žlutá, 120 – zelená, 180 – azurová, 240 modrá, 300 - fialová) ◦ hodnoty: v procentech, 100% - plná sytost, 0% - žádná sytost ◦ hodnoty: v procentech, 100% - bílá, 50% - aktuální odstín, 0% - černá
◦ 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 ◦
◦ ◦ 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
význam hodnot
◦ medium
◦ 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>
<em>
◦ 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
určuje sílu písma hodnoty
výchozí hodnota
význam hodnot
př.: font-weight.html
◦ normal, bold, bolder, lighter, inherit ◦ 100, 200, 300, 400, 500, 600, 700, 800, 900 ◦ normal
◦ 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ší
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
výchozí hodnota
význam hodnot
◦ normal, "velikost", inherit ◦ normal ◦ 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
![]()
- HTML 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.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
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
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: ◦ 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.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
výchozí hodnota
význam hodnot
◦ none, underline, overline, line-through, blink, inherit ◦ 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
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 ◦ , 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
určuje, zda a jak se bude obrázek na pozadí opakovat hodnoty
výchozí hodnota
význam hodnot
◦ repeat, repeat-x, repeat-y, no-repeat, inherit ◦ repeat
◦ 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
výchozí hodnota
význam hodnot
◦ "procenta", "velikost" ◦ top, center, bottom, left, inherit ◦ 0% 0%
◦ "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%)
strany, rohy:
úhly:
linear-gradient(45deg, #00f 25%, #f00 25%, #ff0 75%, #080 75%)
◦ ◦ ◦ ◦ ◦
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
◦ top, right, bottom, left ◦ 0deg – doprava, 90deg – nahoru, 180deg – doleva, 270deg - dolů ◦ 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+
