Mgr. Vlastislav Kučera přednáška č. 7.  Úvod do kaskádových stylů  Připojení stylů k (X)HTML  Syntaxe  Selektory  Přiřazování hodnot  Dědičnost.

Prezentace na téma: "Mgr. Vlastislav Kučera přednáška č. 7.  Úvod do kaskádových stylů  Připojení stylů k (X)HTML  Syntaxe  Selektory  Přiřazování hodnot  Dědičnost."— Transkript prezentace:

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

2  Úvod do kaskádových stylů  Připojení stylů k (X)HTML  Syntaxe  Selektory  Přiřazování hodnot  Dědičnost  Kaskádování  Pseudotřídy

3  oddělení struktury dokumentu od jeho formátování bylo cílem HTML od samých počátků v roce 1990  bohužel nedošlo ze strany autorů prohlížečů k rozvinutí této koncepce  jak stoupala popularita webu, autoři stránek neměli možnost ovlivnit vzhled svých HTML dokumentů  dvě reakce: ◦ listopad 1994 – 1. koncept "Cascading HTML Style Sheet" ◦ listopad 1994 – Netscape – místo implementace stylového jazyka zabudoval základní formátovací prostředky přímo do jazyka HTML

4  CSS1 ◦ prosinec 1996  CSS2 ◦ květen 1998  CSS3 ◦ zatím neuveden, stále ve stadiu příprav  IE ◦ částečná podpora CSS1 – IE3  Netscape ◦ NN4 – v důsledku konkurenčního boje spíše chybová  Opera ◦ od verze 3.5

5  širší formátovací možnosti ◦ několik příkladů  - v HTML nastavuje tučné písmo; v CSS pomocí font-weight lze sílu písma nastavit až v devíti stupních  - v HTML – čára (horizontální), lze nastavit sílu, styl (3D, plochá), barvu; v CSS pomocí border lze vytvořit až 8 stylů čar o libovolné síle a barvě, lze tvořit i vertikální čáry  - v HTML – lze určit jeden ze tří možných stylů odrážky; v CSS pomocí list-style-image lze pro odrážky použít libovolný obrázek  snadná tvorba a údržba stylu ◦ údržba webu, který nevyužívá CSS, je velmi složitá a zdlouhavá (nalézt a nahradit tagy, změnit atributy tabulek,...)  oddělení struktury a stylu ◦ lepší "dělba" práce ◦ tentýž obsah lze prezentovat různými způsoby

6  4 metody ◦ tag  používá se pro připojení ext. styl. předpisu ◦ tag  používá se pro vložení interního styl. předpisu ◦ parametr style u HTML tagů  používá pro přiřazení stylu konkrétnímu tagu ◦ pomocí JavaScriptu a DOM (Document Object Model)

7  vkládá se výhradně do hlavičky dokumentu (mezi tagy a )  př: ◦  parametry ◦ href – cesta k externímu souboru ◦ type – typ odkazovaného předmětu, v tomto případě hodnota – text/css ◦ rel – typ vazby dokumentu k externímu zdroji, v tomto případě hodnota – stylesheet, resp. alternate stylesheet ◦ media – určuje média, pro které je stylový předpis určen, není povinný ◦ title – textový titulek danému styl. předpisu, praktický význam – alternativní styl. předpisy

8  all ◦ styl. předpis vhodný pro všechna zařízení  print ◦ styl. předpis vhodný pro tisk a pro tiskový náhled na monitoru  screen ◦ styl. předpis vhodný pro monitory  handheld ◦ styl. předpis vhodný pro malá přenosná zařízení  a další: např. pro hlasové výstupy, pro zařízení pro nevidomé,...

9  výhody ◦ pro celý web stačí jediný soubor –> zjednodušení správy ◦ načítá se jenom jednou ◦ vyčleněním je důsledně naplněna idea oddělení formátování od struktury  nevýhody ◦ ve spec. případech (odeslání el. poštou)

10  vkládá se výhradně do hlavičky dokumentu (mezi tagy a )  př.: <!-- //--> /* <![CDATA[ */ /* ]]> */  parametry ◦ type – význam a hodnoty jako u link ◦ media – význam a hodnoty jako u link ◦ title – význam a hodnoty jako u link  méně praktický ◦ zvětšuje objem dokumentu (načítá se s každou stránkou) ◦ obtížně se udržují (každá změna se musí provést ve více dokumentech)

11  výhoda ◦ snadné testování  nedoporučuje se používat, v XHTML 1.1 nepřípustné  př: ◦

12  ID identifikátor ◦ př: ◦ smí se vyskytovat v dokumentu pouze jednou ◦ deklarace:  p#uvod – vztahuje se jenom na tagy p, které mají parametr id="uvod"  #uvod – vztahuje se na všechny tagy, které mají mají parametr id="uvod"  třída ◦ př: ◦ může se vykytovat vícekrát v dokumentu ◦ dekalarace  p.konec – vztahuje se jenom na tagy p, které mají parametr class = "konec" .konec – vztahuje se na všechny tagy, které mají třídu parametr class = "konec"

13  př: H1 {color: red; text-decoration: underline;} ◦ H1 – selektor ◦ color, text-decoration – vlastnost ◦ red, underline – hodnota  povolené znaky ◦ na velikosti nezáleží (neplatí pro prvky, které nejsou součástí CSS) ◦ jména prvků, tříd a ID v selektorech – písmena anglické abecedy, číslice, pomlčku; nesmí začínat pomlčkou nebo číslicí  komentář: /*.... */

14  číslo, velikost, procento, barva, URL, řetězec, identifikátor  číslo ◦ 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 !!

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

16  př: * {color: red;} – univerzální selektor ◦ všechny selektory budou mít barvu nastavenou na červenou  př: p {color: red;} ◦ všechny odstavce budou mít barvu textu červenou  př: p b {color: red;} ◦ všechny tučné texty v odstavcích budou červené  př: a:link {color: red;} ◦ všechny nenavštívené odkazy budou červené  př: a:visited {color: red;} ◦ všechny navštívené odkazy budou červené  př: a (p,...):active {color: red;} ◦ váže se k prvku v aktivním stavu (je-li vybrán myší)  př: a(p,...) :hover {color: red;} ◦ váže se k prvku v okamžiku, kdy je nad ním kurzor myši

17  seskupování selektorů ◦ pokud stejná deklarace platí pro více selektorů, mohou být tyto selektory seskupeny do seznamu oddělenými čárkou ◦ př: H1{color: red;} H2{color: red;} H3{color: red;} = H1, H2, H3 {color: red;}

18  univerzální  typový  následníka  potomka  sousedních sourozenců  třídy  ID

19  univerzální ◦ * ◦ váže se k prvku libovolného typu, tj. ke všem prvkům ve stromu dokumentu  typový ◦ váže se ke jménu prvku v jazyce dokumentu ◦ H2{} – pravidlo, které se váže na všechny tagy h2  následníka ◦ váže se k prvkům, které jsou následníky jiného prvku ◦ skládá se ze dvou či více selektorů oddělených mezerou ◦ p em{} – váže na všechny prvky em, které jsou obsaženy v p; pokud bude em mimo p, toto pravidlo se nepoužije

20  potomka ◦ váže se k prvku, který je potomkem jiného prvku ◦ skládá se ze dvou či více selektorů, které jsou odděleny > ◦ !! termín potomek označuje pouze bezprostředního následníka !! ◦..................  b je potomkem p, em je pouze následníkem p

21  sousedních sourozenců ◦ zápis: E1 + E2, kde E1, E2 jsou selektory ◦ pravidlo se váže k E2 jen tehdy, kdy E1a E2 mají stejného rodiče (bezprostředního předchůdce) a E1 bezprostředně předchází E2 ◦ př: .....................  b a em jsou sourozenci, kdežto b a code sourozenci nejsou  př.: kaskadovani.htmlkaskadovani.html

22  je-li atribut prvku class, používá se ve styl. předpisech "."  název třídy (hodnota atributu class musí následovat bezprostředně za tečkou)  př: ◦.trida  vztahuje se na všechny prvky, které mají hodnotu atributu class trida ◦ div.trida  vztahuje se pouze na prvek/tag div, které má hodnotu atributu class nastavenou na trida

23  jazyk dokumentu může obsahovat atributy, jejichž typ je deklarován jako id  jeho zvláštností je, že musí nabývat vždy unikátních hodnot (v jednom dokumentu nemůže být víc prvků, jejichž atributy id měly stejnou hodnotu)  př: ◦ #blok  váže se k jakémukoliv prvku, který má atribut id s hodnotou blok ◦ p#blok  váže se k pouze k prvku p, který má atribut id s hodnotou blok  pokud bychom jej použili, např. na div, pravidlo nebude uplatněno

24  Po analýze dokumentu musí klient všem prvkům přiřadit hodnoty všech vlastností  Výsledná hodnota je výsledkem tohoto výpočtu: ◦ Vezme se určená, tj. ve styl. předpisu explicitně nastavená hodnota – tzv. určená ◦ Je-li určená hodnota relativní, převede se na absolutní – vypočítaná ◦ Vypočítaná hodnota je nakonec transformována na skutečnou hodnotu

25  Klient přiřazuje vlastnostem určené hodnoty násl. algoritmem: 1)Pokud existuje hodnota, která je výsledkem kaskádování, vezme se tato hodnota 2)Neexistuje-li hodnota, která je výsledkem kaskádování, ale daná vlastnost je dědičná, použije se hodnota rodiče 3)Nelze-li uplatnit pravidla 1) a 2), použije se výchozí hodnota vlastnosti  Kořenový prvek nemá žádné rodiče => nemůže hodnoty vlastností dědit; použije se výchozí hodnota vlastnosti

26  určené hodnoty – absolutní (black,, 2cm, …), relativní (auto, 2em, 150%, …)  absolutní hodnoty není třeba přepočítávat  relativní hodnoty musí být převedeny na hodnoty vypočítané: ◦ procenta se vypočítají z referenční hodnoty ◦ hodnoty v relativních jednotkách se musí vynásobit velikostí příslušného písma, nebo rozměrem pixelu ◦ hodnota auto se musí vypočítat způsobem definovaným u každé vlastnosti  ve většině případů se dědí vypočítaná hodnota

27  Vypočítaná hodnota již většinou může být použita  Jsou ale případy, kdy to z různých důvodů nelze  Např: klient vykreslí orámování, jehož síla je celé číslo. Pokud vyjde vypočítaná hodnota desetinné číslo, musí být převedena (zaokrouhlení, oříznutí)  Skutečná hodnota je vypočítaná hodnota, která byla upravena v důsledku omezení

28  některé hodnoty vlastnosti dědí potomci prvku ve stromu dokumentu  pro každou vlastnost je definováno, zda se dědí, či nikoli  tento princip umožňuje, aby autor určil výchozí hodnoty pro celý dokument ◦ nastaví se hodnoty pro kořenový prvek stromu dokumentu (, )

29  stylové předpisy mohou pocházet ze tří zdrojů: ◦ autor webu ◦ uživatel ◦ klient/prohlížeč  styl. předpisy z těchto zdrojů se mohou překrývat  o tom, jaké styly budou použity pro formátování dokumentu rozhodují pravidla kaskádování  ta přiřazují každému stylovému pravidlu určitou váhu; v případech, kdy se styl. pravidla dostanou do kolize, zvítězí to s největší váhou  implicitně – pravidla autora mají vyšší váhu než pravidla uživatele  autorská a uživatelská pravidla mají vyšší váhu než předpis klienta

30  klíčové slovo – píše za vlastní deklaraci, od které je odděleno mezerou  v případě konfliktu mají deklarace s !important přednost před normálními, tj. neoznačenými deklaracemi

31  pravidla pro určení vlastnosti určitého prvku: 1)klient nalezne všechny deklarace, které se vztahují k danému prvku; jedná se o deklarace obsahující danou vlastnost a jejichž selektor se váže k danému prvku 2)1. třídění – dle váhy a původu zdroje; pro normální deklarace platí, že stylový předpis autora přepíše předpis uživatele a ten přepíše výchozí předpis klienta 3)2. třídění – provede se podle konkrétnosti selektorů – konkrétnější přepíší obecnější 4)3. třídění – podle pořadí, v jakém jsou pravidla uvedena; jsou-li váha, původ i konkrétnost dvou pravidel shodné, zvítězí to, které je definováno později

32  při výpočtu – určí se 3 základní hodnoty a, b, c takto: ◦ a = počet ID atributů v selektoru ◦ b = počet ostatních atributů a pseudotříd v selektoru ◦ c = počet názvů prvků v selektoru  následně se získaná čísla zřetězí (zapíší se bezprostředně za sebou) v pořadí a-b-c a výsledkem je konkrétnost selektoru

33 selektorabckonkrétnost *0000 li0011 ul li0022 ul ol+li0033 ul ol li.red01313 li.red.level02121 #blok100100

34  Rozlišují prvky podle jiných charakteristik než je jejich jméno, atributy, obsah  Nejsou explicitně uvedeny ve zdrojovém kódu dokumentu  :first-child ◦ váže k prvku, který je 1. potomkem jiného prvku  :link ◦ vztahuje se k dosud nenavštíveným odkazům  :visited ◦ vztahuje se k již navštíveným odkazům

35  :hover ◦ působí na prvek v době, kdy na něj uživatel ukazuje např. kurzorem myši  :active ◦ působí na prvek v době, kdy je aktivován (v době mezi stiskem a uvolněním tlačítka)  :first-line ◦ aplikuje styl na 1. formátovaný řádek odstavce  :first-letter ◦ váže se k 1. písmenu obsahu prvku ◦ pouze tyto vlastnosti  vlastnosti písma, barvy, pozadí  line-height, text-decoration, margin, padding, border

36  obarvení odkazů: ◦ musí se zachovat pořadí definice:  a:link  a:visited  a:hover  a:active