Návrh a tvorba WWW Přednáška 3

Prezentace na téma: "Návrh a tvorba WWW Přednáška 3"— Transkript prezentace:

1 Návrh a tvorba WWW Přednáška 3
CSS 3

2 HTML 5 ~= HTML + CSS + JS Offline / Storage Graphics / Multimedia
Realtime / Communication CSS3 File / Hardware Access Nuts & Bolts Semantics & Markup Multimedia

3 Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných značkovacím jazykem. Nejčastěji se CSS používá pro grafickou prezentaci HTML stránek. Další použití lze nalézt např. u XML. Podpora nových CSS vlastností je v prohlížečích diskutabilní. U některých vlastností je i rozdíl v samotné implementaci (stejná vlastnost se v různých prohlížečích chová odlišně).

4 selektor {vlastnost: hodnota_vlastnosti}
Syntaxe CSS Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. selektor {vlastnost: hodnota_vlastnosti} Příklad: html: css: výsledek: Můj první styl. <div>Můj první styl.</div> div {color: red; text-decoration: underline}

5 Použití CSS v HTML Přímý styl Stylopis v hlavičce HTML Externí soubor
Styl zaveden přímo ke konkrétnímu tagu prostřednictvím atributu style. Stylopis v hlavičce HTML Styly uvedeny jako obsah tagu style v hlavičce HTML. Externí soubor Nevizuální připojení externího souboru se stylopisem. <div style=“color:red”>text …</div> <style> div {color: red;}</style> <link href=“styly.css” type=“text/css” rel=“stylesheet”>

6 Délkové jednotky Absolutní jednotky
milimetr (1mm = 3.78px) - mm centimetr (1cm = 37.8px) - cm palec (1in = 96px) - in typografický bod - pt cicero – pc Relativní jednotky - mění svou velikost v závislosti na aktuální velikosti písma Šířka velkého písmene M - em Výška malého písmene x – ex Procenta – značíme %, počítají se z velikosti nadřazeného elementu Pixly – značíme px, základní jednotka Délková jednotka se píše hned za číslo, desetinná místa se oddělují tečkou.

7 Barvy v CSS Název barvy RGB zápis
Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow RGB zápis Procentuálně Desítkově Šestnáctkově Paletu barev si můžete vytvořit například pomocí aplikace nebo Body {color:blue} body {color:rgb(100%,0%,100%)} body {color:rgb(255,0,0)} body {color:#FF0000}

8 Třída, Identifikátor Třída Identifikátor *.barva {color:red}
v CSS vytváříme třídu selektor.trida v HTML přiřazujeme vlastnosti CSS přes třídu pomocí atributu class Identifikátor v CSS vytváříme identifikátor selektor#trida v HTML přiřazujeme vlastnosti CSS přes identifikátor pomocí atributu id *.barva {color:red} <div class=“barva”></div> *#barva {color:red} <div id=“barva”></div>

9 Práce se selektory vzor význam * univerzální selektor (lze vynechat) E
selektor elementu E E.myclass selektor přes třídu E#myid selektor přes identifikátor

10 Pokročilá práce se selektory
vzor význam E F Selektor následníka – všechny elementy F, které jsou uvnitř elementu E E>F Selektor přímého následovníka – všechny elementy F, které jsou přímím následovníkem E E~F Selektor následných sourozenců – všechny elementy F, které jsou následnými sourozenci elementu E E+F Selektor následného sourozence – elementy F, který je následným (prvním) sourozencem elementu E

11 Selektory skrz atributy
vzor význam E[foo] element E s atributem “foo” E[foo=“bar”] element E s atributem “foo” jehož hodnota se rovná “bar” E[foo~=“bar”] element E s atributem “foo” jehož jedna z hodnota se rovná “bar” E[foo^=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar” E[foo$=“bar”] element E s atributem “foo” jehož hodnota končí řetězcem “bar” E[foo*=“bar”] element E s atributem “foo” jehož hodnota obsahuje subřetězec “bar” E[foo|=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar”, po které následuje pomlčka

12 Pseudotřídy vzor význam E:link ještě nenavštívený odkaz E:visited
již navštívený odkaz E:active aktivovaný odkaz E:hover zaměřený odkaz (myší) E:focus zaměřený odkaz (tab) E:lang(en) element E v jazykové mutaci en E:empty element, který nemá potomky E:first-child první potomek elementu E E:last-child poslední potomek elementu E

13 Pseudoelementy vzor význam E::first-line první řádka elementu
E::first-letter První písmeno elementu

14 Písmo

15 Blok

16 Pozadí

17 Hranice

18 Box

19 Pozicování

20 Plovoucí elementy Vykreslení elementů je dáno výchozím zobrazovacím schématem. To odpovídá normálnímu toku dokumentu (řádkové elementy – vedle sebe, blokové elementy – pod sebe). Elementy lze mimo tento způsob umístit libovolně v dokumentu a to buď jako plovoucí elementy či jako elementy s definovanou distancí. V takovém případě jsou vyjmuty z normálního toku dokumentu a jsou zobrazovány ve zvláštní vrstvě. Plovoucí elementy jsou takové, které jsou vyjmuty z normálního toku dokumentu a jsou zarovnány doleva nebo doprava a zbytek obsahu dokumentu ho obtéká. Pro plovoucí elementy používáme vlastnost float. Ukončení obtékání elementu řídíme pomocí vlastnosti clear.

21 Pozicování elementů Pozicování elementů v CSS provádíme prostřednictvím vlastnosti position. Tato vlastnost může nabývat hodnot: static (statické, odpovídá normálnímu toku dokumentu), relative (relativní, umístění vztažené k bodu, kde by se element vyskytoval v běžném toku dokumentu), absolute (absolutní, umístění vztažené k nadřazenému elementu) nebo fixed (fixní, neměnné umístění na stránce). Pro vlastní umístění elementu při daném typu pozicování používáme vlastnosti: top (vzdálenost od horní hrany), right (vzdálenost od pravé hrany), bottom (vzdálenost od spodní hrany), nebo left (vzdálenost od levé hrany). Povoleny jsou i záporné hodnoty.

22 Pozicování elementů v CSS

23 Z-index Způsob vykreslování překrývajících se prvků můžeme ovlivnit prostřednictvím vlastnosti z-index. Hodnota vlastnosti je pořadí „vrstvy“. Čím je číslo větší, tím blíže je k pozorovateli. #ten {position: absolute; left: 100px; top: 100px;z-index: 1;} #jack {position: absolute; left: 115px; top: 115px; z-index: 2;} …

24 Overflow, Clip Chování obsahu elementu, který se do daného elementu nevejde, můžeme řídit pomocí vlastnosti overflow. Vlastnost může nabývat hodnot: visible (co se nevejde tak přeteče), auto (v případě přetečení se nezobrazí obsah, ale přidájí se rolovací lišty), scroll (vždy zobrazí rolovací lišty), hidden (co se nevejde se nezobrazí). Prostřednictvím vlastnosti clip lze dosáhnout ořezání elementu. Hodnota vlastnosti potom určuje vzdálenosti od horní hrany, k pravé hraně, ke spodní hraně, od levé hrany. div {width: 100px; height: 50px; overflow: hidden} div {clip: rect (30px 165px 100px 30px)}

25 @ pravidla @charset @import @media @page @font-face
definice znakové sady stylesheetu @import import stylu ze zadaného stylesheetu @media svazuje styly s konkrétním typem výstupu @page pravidlo pro stránková média @font-face umožňuje import vlastních fontů @charset "iso " @import url("styl.css"); @media print {/* stylové vlastnosti pro tisk */} @page :first {margin-top: 10cm} @font-face {font-family: "Scarborough Light"; src: url("

26 Validace stylů Validátor

27 Literatura CSS: The Missing Manua, David Sawyer McFarland, Pogue Press, August 21, 2009, ISBN: CSS Web Site Design Hands on Training, Eric Meyer, Peachpit Press, November 19, 2006, ISBN: HTML5 and CSS3: Develop with Tomorrow's Standards Today, Brian P. Hogan, Pragmatic Bookshelf, January 14, 2011, ISBN: