1 / 36

Tvorba www stránek

Tvorba www stránek. Mgr. Vlastislav Kučera přednáška č. 7. Obsah přednášky. Ú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. Historie CSS.

domani
Download Presentation

Tvorba www stránek

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Tvorba www stránek Mgr. Vlastislav Kučera přednáška č. 7

  2. Obsah přednášky • Ú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. Historie CSS • 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 "CascadingHTML Style Sheet" • listopad 1994 – Netscape – místo implementace stylového jazyka zabudoval základní formátovací prostředky přímo do jazyka HTML

  4. Verze a podpora CSS • 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. Význam CSS • širší formátovací možnosti • několik příkladů • <b> - v HTML nastavuje tučné písmo; v CSS pomocí font-weight lze sílu písma nastavit až v devíti stupních • <hr /> - 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 • <ol> - 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 <font>, změnit atributy tabulek, ...) • oddělení struktury a stylu • lepší "dělba" práce • tentýž obsah lze prezentovat různými způsoby

  6. Připojení stylů k (X)HTML • 4 metody • tag<link> • používá se pro připojení ext. styl. předpisu • tag<style> • používá se pro vložení interního styl. předpisu • parametr style u HTMLtagů • používá pro přiřazení stylu konkrétnímu tagu • pomocí JavaScriptu a DOM (DocumentObject Model)

  7. Připojení stylů k (X)HTML - <link> • vkládá se výhradně do hlavičky dokumentu (mezi tagy<head> a </head>) • př: • <linkmedia="screen"rel="Stylesheet"type="text/css" href="css/hlavni.css" /> • 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. alternatestylesheet • 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. <link> - parametr media • 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. <link> - výhody, nevýhody • 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. Připojení stylů k (X)HTML -<style> • vkládá se výhradně do hlavičky dokumentu (mezi tagy<head> a </head>) • př.: <styletype="text/css"> <!-- //--> </style> <styletype="text/css" media="all"> /* <![CDATA[ */ /* ]]> */ </style> • 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. Připojení stylů k (X)HTML – parametr style • výhoda • snadné testování • nedoporučuje se používat, v XHTML 1.1 nepřípustné • př: • <h1style="text-align: center; text-decoration: underline;"> • <pstyle="color: #FF0; background-color: #000; text-indent: 1.2em">

  12. Připojení stylů k tagům • ID identifikátor • př: <pid="uvod"> • 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ř: <pclass="konec"> • 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. Syntaxe • 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. Syntaxe - hodnoty • čí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. Syntaxe – hodnoty - barvy • 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. Syntaxe – selektory • 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. Syntaxe - selektory • 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. Selektory • univerzální • typový • následníka • potomka • sousedních sourozenců • třídy • ID

  19. Selektory – 1. část • 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. Selektory – 2. část • 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 !! • <p> ..... <b>...<em>...</em>...</b>....</p> • b je potomkem p, em je pouze následníkem p

  21. Selektory – 3. část • 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ř: • <p>...<b>...</b>...<em>...</em>...<code>...</code>...</p> • b a em jsou sourozenci, kdežto b a code sourozenci nejsou • př.: kaskadovani.html

  22. Selektory – 4. část – selektor třídy • 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 classtrida • div.trida • vztahuje se pouze na prvek/tag div, které má hodnotu atributu class nastavenou na trida

  23. Selektory – 5. část – selektor id • 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. Přiřazování hodnot • 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. Určená hodnota • Klient přiřazuje vlastnostem určené hodnoty násl. algoritmem: • Pokud existuje hodnota, která je výsledkem kaskádování, vezme se tato hodnota • Neexistuje-li hodnota, která je výsledkem kaskádování, ale daná vlastnost je dědičná, použije se hodnota rodiče • 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. Vypočítaná hodnota • 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. Skutečná hodnota • 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. Dědičnost • 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 (<html>, <body>)

  29. Kaskádování • 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. Pravidlo !important • 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. Kaskádovací pořadí • pravidla pro určení vlastnosti určitého prvku: • 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 • 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 • 2. třídění – provede se podle konkrétnosti selektorů – konkrétnější přepíší obecnější • 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. Výpočet konkrétnosti selektoru • 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. Příklad výpočtu konkrétnosti

  34. Pseudotřídy • 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. Pseudotřídy – pokr. • :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. Pseudotřídy – př. • obarvení odkazů: • musí se zachovat pořadí definice: • a:link • a:visited • a:hover • a:active

More Related