Download
1 / 36
360 likes | 536 Vues
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.
E N D
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 • 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
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
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
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)
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
<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é, ...
<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)
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)
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">
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"
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ář: /* .... */
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 !!
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%)
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
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;}
Selektory • univerzální • typový • následníka • potomka • sousedních sourozenců • třídy • ID
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
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
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
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
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
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
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
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
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í
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>)
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
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
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
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
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
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
Pseudotřídy – př. • obarvení odkazů: • musí se zachovat pořadí definice: • a:link • a:visited • a:hover • a:active
