Internet publishing CSS – part 2 Petr Zámostný room: A-72a phone: 4222

Slides:



Advertisements
Podobné prezentace
1 Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 – Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím.
Advertisements

Podpora rozvoje cizích jazyků pro Evropu 21. stol. INVESTICE DO ROZVOJE VZDĚLÁVÁNÍ Tento projekt je spolufinancován Evropským sociálním fondem a státním.
Evoluce Katalýza. © 2011 Nature Publishing Group. Published by Nature Publishing Group.2 Figure 1 Rapid evolutionary innovation during an Archaean.
ŠKOLA: Gymnázium, Tanvald, Školní 305, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.5.00/ NÁZEV PROJEKTU: Šablony – Gymnázium Tanvald ČÍSLO.
Jméno autora: Mgr. Mária Filipová Datum vytvoření: Číslo DUMu: VY_32_INOVACE_14_AJ_FT Ročník: 1. – 4. ročník Vzdělávací oblast:Jazyk a jazyková.
Daniel.steigerwald.cz Třídy, dědičnost a OOP v Javascriptu.
Tutorial: Mechanic - electrician Topic: Electric measurement the 2nd. year Measuring devices 1 Prepared by: Ing. Jiří Smílek Projekt Anglicky v odborných.
Lada Leszkowová, Gymnázium K.V. Raise Hlinsko, 2014 leden
Název a adresa školy: Střední odborné učiliště stavební, Opava, příspěvková organizace, Boženy Němcové 22/2309, Opava Název operačního programu:OP.
2.1 School Practise „have got“
Počítačová grafika pro inženýry - CAD systémy pro DTP - znaky, stránky, dokumenty, tisk, osvitové jednotky pro manažery - obrázky, interpretace pro autory.
Prof. Ing. Jan Flusser, DrSc. Digitální zpracování obrazu
Číslo projektuCZ.1.07/1.5.00/ Číslo materiálu VY_32_INOVACE_AJK-3.PT-19-Služby Název školyStřední odborná škola a Střední odborné učiliště, Dubno.
Jméno autora:Mgr. Mária Filipová Datum vytvoření: Číslo DUMu:VY_32_INOVACE_05_AJ_ACH Ročník: 1. – 4. ročník Vzdělávací oblast: Jazyk a jazyková.
SharePoint technologie WSS 3.0 a MOSS 2007 Tomáš Kutěj TSP – Office platform Microsoft.
Píseň “ABC” Reakce?. Kdo je tady? Kdo má domácí úkol?
ŠkolaStřední průmyslová škola Zlín Název projektu, reg. č.Inovace výuky prostřednictvím ICT v SPŠ Zlín, CZ.1.07/1.5.00/ Vzdělávací.
Digitální výukový materiál zpracovaný v rámci projektu „EU peníze školám“ Projekt:CZ.1.07/1.5.00/ „SŠHL Frýdlant.moderní školy“ Škola:Střední škola.
David Žváček 3.B. Boiler feed pump is a sort of pump designed to pump water into a steam boiler. The pump can be used to convey fresh water or condensed.
Innovative Teachers: European Poster Event 2004
HEJ, HEJ, MY VÍRU MÁME Say, Say, Say you believe it ZPÍVEJ, ŽE SVĚTU JI DÁME Sing for, The whole world to hear it VÍME A VYZNÁVÁME We know and we declare.
Elektronická učebnice - II
Tutorial: Engineering technology Topic: Casting to temporary forms Prepared by: Ing. Elena Nová Projekt Anglicky v odborných předmětech, CZ.1.07/1.3.09/
Jméno autora:Mgr. Mária Filipová Datum vytvoření: Číslo DUMu:VY_32_INOVACE_06_AJ_ACH Ročník: 1. – 4. ročník Vzdělávací oblast: Jazyk a jazyková.
Modal Verbs = způsobová slovesa.
Čím pojedete na dovolenou ? Co takhle autíčkem ?.
DIANA NARVÁEZ Hlavní město Ekv. Je Quito nacházející se v horách Ekv se dělí na 4 časti: Amazonie, Hory, Přimoří a Galapágy V Ekv. Žije 12´
Project Tree Planting. About parcel Parcel is owned by Pěnčín village Parcel is owned by Pěnčín village Village Pěnčín is situated near Jablonec nad Nisou.
Podpora rozvoje cizích jazyků pro Evropu 21. stol. INVESTICE DO ROZVOJE VZDĚLÁVÁNÍ Tento projekt je spolufinancován Evropským sociálním fondem a státním.
Jméno autora: Mgr. Olga Bayerlová Datum vytvoření: Číslo DUMu: VY_32_INOVACE_18_AJ3E Ročník: II. Anglický jazyk Vzdělávací oblast: Jazyk a jazyková.
Jazyk a jazyková komunikace Cizí jazyk Komunikace Zjisti, o čem se mluví 1 VY_22_INOVACE_26 Sada 2 Základní škola T. G. Masaryka, Český Krumlov, T. G.
Around London in 15 minutes Autor: Mgr. Zdenka Mléčková
Educational program: Mechanic - electrician Title of program: Technical training II. class Astable multivibrator Worked out: Bc. Chumchal Miroslav Projekt.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
 Hra je určená pro dvě družstva nebo dva žáky – žluté x zelené  Po kliknutí na tlačítko s číslicí se zobrazí otázka, s otázkou se zároveň zobrazí napovídající.
Setkání uživatelů SFX Statistické reporty SFX.
Podpora rozvoje cizích jazyků pro Evropu 21. stol. INVESTICE DO ROZVOJE VZDĚLÁVÁNÍ Tento projekt je spolufinancován Evropským sociálním fondem a státním.
Tutorial: Engineering technology Topic: Transmission by gear wheels Prepared by: Ing. Jaroslav Hábl Projekt Anglicky v odborných předmětech, CZ.1.07/1.3.09/
Přejít na první stránkuLONDON Test yourself by Ludmila Lukavcova double-decker.
Maturita oral exam rehearsal Lada Leszkowová, GKVR Hlinsko, 2013 prosinec The Czech Republic.
Travelling Maturita oral exam rehearsal
Internetové publikování publikace na serveru, rámce Petr Zámostný místnost: A-72a tel.: Konzultační.
Třídy, generické třídy, pseudotřídy
Příjemce Základní škola, Třebechovice pod Orebem, okres Hradec Králové Registrační číslo projektuCZ.1.07/1.1.05/ Název projektu Digitalizace výuky.
Tento výukový materiál vznikl v rámci Operačního programu Vzdělávání pro konkurenceschopnost 1. KŠPA Kladno, s. r. o., Holandská 2531, Kladno,
How To Decorate Your Small Room
Tutorial: Mechanic - electrician Topic: Technical training II. class Printed circuit boards 2 Prepared by: Melichařík Lubomír Projekt Anglicky v odborných.
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.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
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.
TNPW1 Cvičení
CSS Cascading Style Sheets Kaskádové styly
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)
Číslo projektu CZ.1.07/1.5.00/ Číslo materiálu VY_32_INOVACE_ 007 Název školy Gymnázium, Tachov, Pionýrská 1370 Autor Mgr.Stanislava Antropiusová.
Obchodní akademie, Ostrava-Poruba, příspěvková organizace Vzdělávací materiál/DUM Businessland / Making Contracts 06B16 AutorLadislava Pechová Období vytvořeníLeden.
Jméno autora: Mgr. Mária Filipová Datum vytvoření: Číslo DUMu: VY_32_INOVACE_12_AJ_EP Ročník: 1. – 4. ročník Vzdělávací oblast:Jazyk a jazyková.
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.
Název a adresa školy: Střední odborné učiliště stavební, Opava, příspěvková organizace, Boženy Němcové 22/2309, Opava Název operačního programu:
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
Tutorial: Obchodní akademie Topic: Logical Functions Prepared by: Mgr. Zdeněk Hrdina Projekt Anglicky v odborných předmětech, CZ.1.07/1.3.09/ je.
Název a adresa školy: Střední odborné učiliště stavební, Opava, příspěvková organizace, Boženy Němcové 22/2309, Opava Název operačního programu:OP.
Internet publishing HTML documents writing basics Petr Zámostný room: A-72a phone.: 4222
CZECH STATISTICAL OFFICE Na padesátém 81, CZ Praha 10, Czech Republic Blind Friendly Website Helena Koláčková Czech Statistical Office.
Digitální učební materiál
Živá fáze.
Introduction to MS Dynamics NAV (Expected Costs)
Střední odborná škola a Střední odborné učiliště, Vocelova 1338
Multiplying Fractions
Concentration Effects of Volatile Anesthetics on the Properties of Model Membranes: A Coarse-Grain Approach  Mónica Pickholz, Leonor Saiz, Michael L.
Transkript prezentace:

Internet publishing CSS – part 2 Petr Zámostný room: A-72a phone:

Cascading Style Sheets  HTML document formatting separated from the main content  Possible ways of its implementation Style specification for each element in ‘style’ attribute Style definition in document head Linking external style sheet

Style definition in HTML head  Good for single HTML file <!– this line is HTML comment (hides style from ancient browsers... Style definition... -->

Stylesheet in external file  Single stylesheet can be shared by many documents......

Style definition for any element  style attribute  Violates the CSS philosophy of separating the formatting from information... This paragraph will be formatted according the rules in the style attribute....

CSS rule structure  selector The simplest selector is type selector (the name of element, e.g. b, p, div …)  property Name of adjustable property (> 90 in CSS 2.1)  value value assigned to property property type specify which values are allowed selector { property1: value; property2: value;... propertyN: value }

Rules merging Rules with the same declarations can be merged into single rule h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } Is equivalent to: h1, h2, h3 { font-family: sans-serif }

Additional selectors  Universal selector * - affects all elements in the document Example:  * {color: blue;}  All elements will use blue font

Elements relationships  Parent An element A is called the parent of element B if B is directly contained by A.  Child An element A is called the child of element B if and only if B is the parent of A.

Elements relationships  Descendant An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B.

Descendant selectors  Selector affects only elements that are descendants of specified type of elements  Relationship is expressed by space  Example: h1 em {color: blue;} Selector affects elements that are directly or indirectly contained in a element Typografie na internetu typografie na internetu Typografie na internetu

Descendant selectors  Selector may specify multiple relationships and may contain universal selector  Example: div * p {color: blue;} This selector affects elements that are grand-children and further descendants of a element

Child selectors  Selektor, který se vztahuje pouze na elementy, které jsou dětmi jiného elementu  K vyjádření následnictví se používá „>”  Např: H1>em {color: blue;} Selektor se týká těch elementů, které jsou obsaženy přímo v elementu h1 Typografie na internetu typografie na internetu Typografie na internetu

„Adjacent sibling“ selektory  Selektor, který se vztahuje pouze na elementy, které jsou společnými dětmi nějakého elementu s jiným elementem a s tímto elementem sousedí  K vyjádření následnictví se používá znak „+“  Např: p {text-indent: 2em;} h1+p {text-indent: 0em;}  !!!Nefunguje v MSIE 6

Atributové selektory  Selektor, který se vztahuje pouze na elementy, které mají přiřazenu hodnotu danému atributu  K vyjádření vztahu se používá [atribut] nebo [atribut=hodnota]  Např: h1[title] {color: red;}  !!!Nefunguje v MSIE 6

Další selektory - třída  Třída = podskupina elementů V HTML definována atributem class Např. modry text  Definice v CSS pro třídu: (element).třída { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostN: hodnota }.modry { color: blue; }

Příslušnost k více třídám  Jednotlivé třídy odděleny mezerami Např. modry text  Definice v CSS pro třídu: p.modry {color: blue;} p.inverzni {background-color: blue;} Selektor pro element patřící do obou tříd p.modry.inverzni {background-color: blue; color: yellow;}

Další selektory – id elementu  id = identifikátor jednoho konkrétního elementu na stránce V HTML definován atributem id Např. modry text  Definice v CSS pro id: #id { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostN: hodnota } #1odstavec { color: blue; }

Pseudotřídy  Odkazy a:link – dosud nenavštívený odkaz a:visited – navštívený odkaz a:active – link je aktivní (vybrán klávesou TAB) a:hover – na odkaz se ukazuje myší

Pseudoelementy  :first-line Vztahuje se na první řádek nějakého elementu Např: p:first-line { font-variant: small-caps; }  :first-letter Vztahuje se na první písmeno nějakého elementu

Výška a šířka elementu  height: délková míra  width: délková míra  Uplatní se pouze na blokové elementy

Zarovnání  Zarovnání textu v elementu text-align  Zarovnání elementu na střed margin-left: auto; margin-right: auto;  Zarovnání elementu doprava margin-left: auto; margin-right: 0px;

Vertikální zarovnání  baseline Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline.  middle Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.  sub Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)  super Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)  text-top Align the top of the box with the top of the parent's content area (see ).  text-bottom Align the bottom of the box with the bottom of the parent's content area (see ).  Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.  Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.  top Align the top of the aligned subtree with the top of the line box.  bottom Align the bottom of the aligned subtree with the bottom of the line box.

Tabulky  U tabulek často využijete různé typy zarovnání  Dva modely tvorby okrajů tabulky border-collapse: collapse | separate  border-spacing (pro separate)  Pro okraje elementů tabulky lze použít standardní vlastnosti border margin padding