Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Návrh a tvorba WWW Přednáška 3 CSS 3. HTML 5 ~= HTML + CSS + JS Offline / Storage Graphics / Multimedia Realtime / Communication CSS3 File / Hardware.

Podobné prezentace


Prezentace na téma: "Návrh a tvorba WWW Přednáška 3 CSS 3. HTML 5 ~= HTML + CSS + JS Offline / Storage Graphics / Multimedia Realtime / Communication CSS3 File / Hardware."— 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 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 {color: red; text-decoration: underline} Můj první styl.

5 Použití CSS v HTML Přímý styl 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. text … div {color: red;}

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 –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 –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} *.barva {color:red}

9 Práce se selektory vzorvýznam *univerzální selektor (lze vynechat) Eselektor elementu E E.myclassselektor přes třídu E#myidselektor přes identifikátor

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

11 Selektory skrz atributy vzorvý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 vzorvýznam E:linkještě nenavštívený odkaz E:visitedjiž navštívený odkaz E:activeaktivovaný odkaz E:hoverzaměřený odkaz (myší) E:focuszaměřený odkaz (tab) E:lang(en)element E v jazykové mutaci en E:emptyelement, který nemá potomky E:first-childprvní potomek elementu E E:last-childposlední potomek elementu E

13 Pseudoelementy vzorvýznam E::first-lineprvní řádka elementu E::first-letterPrvní 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 {clip: rect (30px 165px 100px 30px)} div {width: 100px; height: 50px; overflow: hidden}

25 @ –definice znakové sady –import stylu ze zadaného –svazuje styly s konkrétním typem –pravidlo pro stránková média –umožňuje import vlastních print {/* stylové vlastnosti pro tisk :first {margin-top: {font-family: "Scarborough Light"; src: url("http://www.font.site/s/scarbo-lt");}

26 Validace stylů Validátor –http://http://jigsaw.w3.org/css-validator/

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:


Stáhnout ppt "Návrh a tvorba WWW Přednáška 3 CSS 3. HTML 5 ~= HTML + CSS + JS Offline / Storage Graphics / Multimedia Realtime / Communication CSS3 File / Hardware."

Podobné prezentace


Reklamy Google