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

Slides:



Advertisements
Podobné prezentace
Technologie pro publikování na webu 1
Advertisements

Technologie pro publikování na webu 1
TVORBA WEBOVÝCH STRÁNEK
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy.
TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek.
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
VY_32_INOVACE_4.3.IV1.02/Ku Html dokument a jeho struktura Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/
Programování HTML stránek
Selektory 1 1. Selektor elementu Deklarované styly budou použité při každém vyskytování elementu v dokumentu. Selektor elementu se obvykle používá pro.
TNPW1 Cvičení
Mgr. Vlastislav Kučera přednáška č. 10.  Polohování ◦ Absolutní polohování  Vlastnosti ◦ umístění ◦ display ◦ visibility.
TVORBA WEBOVÝCH STRÁNEK
Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Jazyk HTML.
VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Třídy, generické třídy, pseudotřídy
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Blokový model v CSS Obr. 1.
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.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.13 Tematická oblast: Aplikační software pro práci s informacemi II. CSS - vlastnosti Typ: DUM - kombinovaný Předmět:
Délkové jednotky v CSS Pro zápis délkových jednotek se používají jednotky: Absolutní Relativní Procenta Údaje se zapisují jako celá nebo desetinná čísla.
KASKÁDOVÉ STYLY SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE.
Návrh a tvorba WWW Cvičení 3
CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
Kaskádové styly - CSS.
KASKÁDOVÉ STYLY DÉLKOVÉ JEDNOTKY DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY.
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
CSS – vlastnosti textu text-align (vodorovné zarovnání)
CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)
TNPW1 Cvičení
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
KASKÁDOVÉ STYLY 1. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ.
CSS Cascading Style Sheets Kaskádové styly
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
CSS – float a clear Mgr. Lenka Švancarová. CSS – float Vlastnost určuje obtékání prvku. Hodnoty:  right – prvek bude zarovnán vpravo, okolní obsah stránky.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS.
Základní pojmy (1) Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),
Mgr. Vlastislav Kučera přednáška č. 3
Mgr. Vlastislav Kučera lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
CSS – selektor class.tx { color: black; /* nastaví černou barvu písma */ } Selektor class (třída) použijeme pokud chceme určité vlastnosti definovat pro.
Aplikace XML pro Internet
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS formátování.
Styly CSS VýhodyDruhyZápis. Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek.
NSWI096 - INTERNET CSS – kaskádové styly Mgr. Petr Lasák.
Kaskádové styly IS a webové prezentace cvičení. Proč používat CSS? Řadu grafických charakteristik dokumentu lze nastavit pomocí parametrů jednotlivých.
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
Kaskádové styly CSS Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
Tvorba WWW stránek Formátování
ADOBE DREAMWEAVER CS6 CSS - Formátování textu
Tvorba WEBOVÝCH stránek – obrázky
Tvorba webových stránek
Transkript prezentace:

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 Access Nuts & Bolts Semantics & Markup Multimedia

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ě).

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}

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”>

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.

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 http://colorschemedesigner.com/ nebo http://kuler.adobe.com/. Body {color:blue} body {color:rgb(100%,0%,100%)} body {color:rgb(255,0,0)} body {color:#FF0000}

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>

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

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

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

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

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

Písmo

Blok

Pozadí

Hranice

Box

Pozicování

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.

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.

Pozicování elementů v CSS

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;} …

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)}

@ 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-8859-1" @import url("styl.css"); @media print {/* stylové vlastnosti pro tisk */} @page :first {margin-top: 10cm} @font-face {font-family: "Scarborough Light"; src: url("http://www.font.site/s/scarbo-lt");}

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

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