1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11

Rozměr: px
Začít zobrazení ze stránky:

Download "1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11"

Transkript

1 Obsah 3 1: Úvod 9 Dříve než začnete Co a kde v knize naleznete Zdroje Doporučení pro další studium Historie CSS Význam CSS Širší formátovací možnosti Snadná tvorba a údržba konzistentního stylu Oddělení struktury a stylu Vyšší přístupnost dokumentů Dynamická práce se styly Formátování XML dokumentů Strategie použití CSS Obohacení formátovacích možností Veškeré formátování s výjimkou rozmístění (layoutu) prvků Formátování jen pomocí CSS, včetně rozmístění prvků : Základní principy CSS 23 Vazba na (X)HTML dokument Základní metody připojení stylů k (X)HTML Kompatibilita a selekce prohlížečů Syntaxe Struktura stylového předpisu Klíčová slova Povolené znaky Definice At-pravidla Sady pravidel Deklarace a vlastnosti Hodnoty Selektory Svazování Syntaxe selektorů Univerzální selektor Typové selektory

2 4 CSS pro webdesignery Selektor následníka Selektor potomka Selektor sousedních sourozenců Selektor atributu Selektory ID Pseudoprvky a pseudotřídy Přiřazování hodnot, kaskádování a dědičnost Určené, vypočítané a skutečné hodnoty Dědičnost Kaskádování Média Jak definovat stylové předpisy pro určitá média Typy médií Koncepce boxů Rozměry boxu Vlastnosti okrajů, výplně a orámování Koncepce vizuálního formátování Úvod do koncepce vizuálního formátování Generování boxů Polohování Další detaily vizuálního formátování : Referenční přehled CSS 99 Rozměry Výplň Orámování Okraje Pozadí Umístění Ohraničení Písmo Text Seznamy a odrážky Tabulka Generovaný obsah Klasifikační vlastnosti a různé Stránkovaná média Hlasový výstup

3 Obsah3 5 4: Detailní popis vlastností 113 Vlastnost Background Vlastnost Background-attachment Vlastnost Background-color Vlastnost Background-image Vlastnost Background-position Vlastnost Background-repeat Vlastnost Border Vlastnost Border-bottom Vlastnost Border-bottom-color Vlastnost Border-bottom-style Vlastnost Border-bottom-width Vlastnost Border-collapse Vlastnost Border-color Vlastnost Border-left Vlastnost Border-left-color Vlastnost Border-left-style Vlastnost Border-left-width Vlastnost Border-right Vlastnost Border-right-color Vlastnost Border-right-style Vlastnost Border-right-width Vlastnost Border-spacing Vlastnost Border-style Vlastnost Border-top Vlastnost Border-top-color Vlastnost Border-top-style Vlastnost Border-top-width Vlastnost Border-width Vlastnost Bottom Vlastnost Caption-side Vlastnost Clear Vlastnost Clip Vlastnost Color Vlastnost Content Vlastnost Counter-increment Vlastnost Counter-reset

4 6 CSS pro webdesignery Vlastnost Cursor Vlastnost Direction Vlastnost Display Vlastnost Empty-cells Vlastnost Float Vlastnost Font Vlastnost Font-family Vlastnost Font-size Vlastnost Font-size-adjust Vlastnost Font-stretch Vlastnost Font-style Vlastnost Font-variant Vlastnost Font-weight Vlastnost Height Vlastnost Left Vlastnost Letter-spacing Vlastnost Line-height Vlastnost List-style Vlastnost List-style-image Vlastnost List-style-position Vlastnost List-style-type Vlastnost Margin Vlastnost Margin-bottom Vlastnost Margin-left Vlastnost Margin-right Vlastnost Margin-top Vlastnost Marker-offset Vlastnost Marks Vlastnost Max-height Vlastnost Max-width Vlastnost Min-height Vlastnost Min-width Vlastnost Orphans Vlastnost Outline Vlastnost Outline-color Vlastnost Outline-style Vlastnost Outline-width

5 Obsah3 7 Vlastnost Overflow Vlastnost Padding Vlastnost Padding-bottom Vlastnost Padding-left Vlastnost Padding-right Vlastnost Padding-top Vlastnost Page Vlastnost Page-break-after Vlastnost Page-break-before Vlastnost Page-break-inside Vlastnost Position Vlastnost Quotes Vlastnost Right Vlastnost Size Vlastnost Table-layout Vlastnost Text-align Vlastnost Text-decoration Vlastnost Text-indent Vlastnost Text-shadow Vlastnost Text-transform Vlastnost Top Vlastnost Unicode-bidi Vlastnost Vertical-align Vlastnost Visibility Vlastnost White-space Vlastnost Widows Vlastnost Width Vlastnost Word-spacing Vlastnost Z-index A: Slovníček pojmů 271 B: Výchozí stylový předpis pro HTML 4 275

Ukázka knihy z internetového knihkupectví www.kosmas.cz

Ukázka knihy z internetového knihkupectví www.kosmas.cz Ukázka knihy z internetového knihkupectví www.kosmas.cz U k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 6 5 9 U k á z k a k n i h

Více

Cascading Style Sheets CSS Selektory Selektory

Cascading Style Sheets CSS Selektory Selektory CSS JohanSebastianBachwasaprolificomposeṙ Bach'shomepage TITLE> BODY>Bach'shomepage H1> 1{color:red} h STYLE> HEAD>

Více

CSS - stručná reference kaskádových stylů

CSS - stručná reference kaskádových stylů 1. font a parametry písma font, font-family, font-size, font-style, font-variant, font-weight 1.1 font Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách 1.2-1.6 a line-height

Více

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.

CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size. Page 1 of 6 CSS vlastnosti - stručný prehľad Vlastnosti písma font-family rodina písma font-style styl písma font-variant varianta písma font-weight duktus písma font-size veľkosť písma font písmo

Více

Kaskádové styly (CSS) Cascading Style Sheets

Kaskádové styly (CSS) Cascading Style Sheets CSS verze 22.11. 2007 1 Kaskádové styly (CSS) Cascading Style Sheets Existují 3 druhy zápisu CSS do webové stránky a) Vložením tagu STYLE do hlavičky dokumentu ...definice stylu atributy: type...

Více

Blokový model v CSS:

Blokový model v CSS: Blokový model v CSS: Blokový model v CSS: Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal o kolik se zvětší mezera mezi slovy letter-spacing

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

Více

Tvorba webu. Kaskádové styly (CSS) Martin Urza

Tvorba webu. Kaskádové styly (CSS) Martin Urza Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).

Více

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

PODPORA ELEKTRONICKÝCH FOREM VÝUKY I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/01.0043 Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a

Více

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1) Stránka č. 1 z 9 Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia

Více

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26 CSS 5 Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentáře... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26

CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26 CSS 5 Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentáře... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis přímo

Více

Jak vytvořit jednoduché webové stránky.

Jak vytvořit jednoduché webové stránky. Jak vytvořit jednoduché webové stránky. Od vynálezu protokolu HTTP pro přenos dokumentů a jazyka HTML pro jejich popis již uběhlo více než 17 let. Za tu dobu se vyvíjel jak protokol, tak i jazyk. Od původního

Více

Káskádové styly = CSS

Káskádové styly = CSS Návrh a tvorba WWW stránek 1/20 Káskádové styly = CSS CSS = Cascading Style Sheets = tabulky kaskádových stylů na začátku byl stylesheet soubor pravidel definující vzhled textu nezávisle na obsahu pomocí

Více

Přehled vlastností stylů

Přehled vlastností stylů Přehled stylů Styly jsou ds jefektivnějším způsobem, jak ovládat grafický vzhled strák. Definují přes padesát, které slouží k vizuálních atributů elementů. V následujících tematicky rozčleněných tabulkách

Více

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1) Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading

Více

CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26

CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26 CSS 5... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentá e... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis p ímo do dokumentu...

Více

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie Škola Střední odborná škola a Střední odborné učiliště, Hustopeče, Masarykovo nám. 1 Autor Ing. Jiří Tinka Číslo projektu CZ.1.07/1.5.00/34.0394 Číslo DUM VY_32_INOVACE_18_ICT_08.08a Název Tvorba webu

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03b 1. Kaskádové styly (CSS) 2. Vazba CSS na (X)HTML dokument 3. Syntaxe CSS 4. Barva a

Více

SkautIS Remote Components absolventská práce

SkautIS Remote Components absolventská práce MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11 Obsah Úvod... 3 1. Seznámení se SkautIS komponentami... 3 1.1.

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené... Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat

Více

Historie. K čemu je to dobré? Začínáme. Úvod do CSS Historie K čemu je to dobré? Začínáme

Historie. K čemu je to dobré? Začínáme. Úvod do CSS Historie K čemu je to dobré? Začínáme Úvod do CSS Historie K čemu je to dobré? Začínáme Historie CSS (Cascading Sytle Sheets) boli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu strák. První návrh normy byl zveřejněn v roce 1994,

Více

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26 CSS 5 Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentáře... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis přímo

Více

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

CSS Cascading style sheet přehled vlastností selektory

CSS Cascading style sheet přehled vlastností selektory CSS Cascading style sheet přehled vlastností selektory Praha a EU Investujeme do vaší budoucnosti Obsah 1 Přehled některých vlastností a hodnot... 2 1.1 Formátování textu... 2 1.2 Barvy a pozadí v dokumentu...

Více

KASKÁDOVÉ STYLY - CSS

KASKÁDOVÉ STYLY - CSS Kaskádové styly I. KASKÁDOVÉ STYLY - CSS HTML je značkovací jazyk, ve kterém by se pomocí značek měl vyznačovat význam jednotlivých částí textu. Z vlastní zkušenosti však víme, že dnes v HTML existuje

Více

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz 6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj

Více

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti

Více

Soukromá vyšší odborná škola a Obchodní akademie s.r.o. České Budějovice Pražská 3. Absolventská práce. 2003 Petra Pavlyková

Soukromá vyšší odborná škola a Obchodní akademie s.r.o. České Budějovice Pražská 3. Absolventská práce. 2003 Petra Pavlyková Soukromá vyšší odborná škola a Obchodní akademie s.r.o. České Budějovice Pražská 3. Absolventská práce 2003 Petra Pavlyková Prohlašuji že jsem absolventskou práci na téma Tvorba internetových aplikací

Více

selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;}

selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;} Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

Skripta ke školení. Základy HTML a CSS. vypracoval: Tomáš Herout. tel:

Skripta ke školení. Základy HTML a CSS. vypracoval: Tomáš Herout.   tel: Skripta ke školení Základy HTML a CSS vypracoval: Tomáš Herout e-mail: herout@helpmark.cz tel: 739 719 548 2015 Obsah HTML... 4 STRUKTURA DOKUMENTU WEBOVÉ STRÁNKY... 4 CO JE TO HTML... 4 Jak se nazývají

Více

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE

Více

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

MODUL 7: TVORBA WEBOVÝCH APLIKACÍ

MODUL 7: TVORBA WEBOVÝCH APLIKACÍ Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice MODUL 7: TVORBA WEBOVÝCH APLIKACÍ Studijní opora Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem

Více

Všechny značky musí být vzájemně správně vnořeny <i><b>špatně</i></b> <i><b>správně</b></i>

Všechny značky musí být vzájemně správně vnořeny <i><b>špatně</i></b> <i><b>správně</b></i> 1 Tvorba WWW stránek Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka HTML (Hypertext Markup Language). Mohou být použité i jiné programovací jazyky jako XML, XHTML apod.

Více

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line)

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line) Mimochodem, co je CSS? CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože

Více

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

Více

Počítače přirozeně pracují pouze s čísly

Počítače přirozeně pracují pouze s čísly Kódování a entity v XHTML Úvod do CSS Internetové publikování 1 Kódování znaků Počítače přirozeně pracují pouze s čísly Zprostředkování práce se znaky definice párování číslo ~ znak soubor definic = kódová

Více

HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>

HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag> HTML Úvod do (X)HTML Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) text HTML HyperText Markup Language HTML první verze 1991 Značkovací jazyk

Více

Microsoft Office SharePoint Server 2007

Microsoft Office SharePoint Server 2007 Microsoft Office SharePoint Server 2007 Příručka pro uživatele Úvod do HTML a CSS Verze 1.1 Stav k 7.4. 2009 Středisko komunikačních a informačních systému Univerzita obrany Brno 2009 2008 Středisko komunikačních

Více

Základy CSS (3. přednáška)

Základy CSS (3. přednáška) Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze

Více

.rohy-kulate { width: 250px; background: url(obr/rohy-spodni.gif) bottom no-repeat; border-top: 2px solid #AAA; }

.rohy-kulate { width: 250px; background: url(obr/rohy-spodni.gif) bottom no-repeat; border-top: 2px solid #AAA; } 246 Jak na dva kulaté rohy bloku s pevnou šířkou začátečník Chcete na svoje stránky umístit blok s rámečkem, jehož dva horní či dva spodní rohy budou kulaté a zbylé dva hranaté? Jestliže má váš blok neměnnou

Více

Techniky rozvržení KAPITOLA 2

Techniky rozvržení KAPITOLA 2 Techniky rozvržení KAPITOLA 2 V této kapitole: Box model Blokové versus řádkové elementy Zkrácené versus běžné vlastnosti jazyka CSS Rozvržení založené na obtékání Pozicování v jazyce CSS Responzivní web

Více

TNPW1 Cvičení

TNPW1 Cvičení 13.10.2015 aneta.bartuskova@uhk.cz Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS

Více

VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB. Projekt

VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB. Projekt VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB Projekt Návrh a implementace systému správy obsluhy pro informační screen VOŠIS Zadavatel: Ing. Antonín Skopec Petr Bednář vedoucí

Více

2.8.1 Nejdůležitější a nejpoužívanější <meta /> elementy... 35 2.9 Ostatní... 36 2.9.1 Znakové entity... 36 2.9.2 kontejnery... 36 2.9.3 komentáře...

2.8.1 Nejdůležitější a nejpoužívanější <meta /> elementy... 35 2.9 Ostatní... 36 2.9.1 Znakové entity... 36 2.9.2 kontejnery... 36 2.9.3 komentáře... OBSAH Obsah... 4 1. Úvod... 7 1.1 Princip webových stránek... 7 1.1.1 WWW stránka... 7 1.2 Historie XHTML... 9 1.3 Obecně o XHTML... 10 1.4 XHTML editory... 12 1.4.1 Wysiwyg editory... 12 1.4.2 Strukturní

Více

absolutní (úplná) začíná lomítkem http:// nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru.

absolutní (úplná) začíná lomítkem http:// nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru. Základy www Jak vytvořit webové stránky Návody a příklady najdete na adrese webowebu.phorum.cz Podrobný popis a další možnosti najdete na stránkách owebu.org Potřebný software Html editor PSPad, který

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

Tvorba webových aplikací pomocí AJAX

Tvorba webových aplikací pomocí AJAX Tvorba webových aplikací pomocí AJAX Publikace vznikla v rámci projektu OPVK Vyškolený pedagog záruka kvalitní výuky na Střední odborné škole veterinární, mechanizační a zahradnické a Jazykové škole s

Více

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly CSS 1996 Cascading Style Sheets (tabulky kaskádových stylů) Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích

Více

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language XHTML a tvorba webu 1. Historie a základní struktura HTML HyperText Markup Language - HTML 0.9 první verze 1991 - Značkovací jazyk pro zápis dokumentů na webu - Vkládání do textu obrázků, hypertextových

Více

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera přednáška č. 2 Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS

Více

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC

OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC OBALKYKNIH.CZ API 3.0, IMPLEMENTACE PRO ALEPH OPAC Charakteristika: soubor skriptů, obrázků a popisů k implementaci komunikace s API služby obalkyknih.cz, verze 3.0 pro ALEPH OPAC. Balíček souvisejících

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

Manuál. pro tvorbu webu. HTML CSS JavaScript

Manuál. pro tvorbu webu. HTML CSS JavaScript Manuál pro tvorbu webu HTML CSS JavaScript Obsah HTML... 3 Struktura stránky... 3 Práce s textem... 3 Obrázky a barvy... 4 Odkazy... 4 Seznamy... 5 Tabulky... 5 Formuláře... 6 CSS... 7 Selektory... 7 Písmo

Více

CSS Kaskádové styly. formátování webových stránek

CSS Kaskádové styly. formátování webových stránek CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací

Více

SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE

SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE Pavol Hudran 2007 OPAVA SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky Pavol

Více

CSS Stylování stránek. Zpracoval: Petr Lasák

CSS Stylování stránek. Zpracoval: Petr Lasák CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze

Více

12. Úvod do CSS (CSS styly)

12. Úvod do CSS (CSS styly) 12. Úvod do CSS (CSS styly) HTML kód je naprostým základem při tvorbě internetových stránek. Je to nosný pilíř, který musí jakýkoliv tvůrce internetových stránek bez potíží ovládat. Pokud ale budete tvořit

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 3. část Vztahy mezi elementy»

Více

Použití CSS v dokumentech HTML

Použití CSS v dokumentech HTML Použití CSS v dokumentech HTML Tabulky kaskádových stylů mohou být součástí dokumentu HTML, nebo být umístěny v separé souboru. Jsou tři možnosti použití: přímá definice stylu - jednoho prvku pomocí atributu

Více

Internetové publikování

Internetové publikování Internetové publikování Doc. Ing. Petr Zámostný, Z Ph.D. místnost: A-72aA tel.: 4222, 4167 (sekretari( sekretariát ústavu 111) e-mail: petr.zamostny@vscht vscht.czcz Internetové publikování CSS 3. část

Více

Tvorba www stránek v HTML a CSS

Tvorba www stránek v HTML a CSS Tvorba www stránek v HTML a CSS Publikace vznikla v rámci projektu OPVK Vyškolený pedagog záruka kvalitní výuky na Střední odborné škole veterinární, mechanizační a zahradnické a Jazykové škole s právem

Více

Kaskádové styly 4IZ228 tvorba webových stránek a aplikací

Kaskádové styly 4IZ228 tvorba webových stránek a aplikací 4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2014/10/02 11:38:43 $ Obsah Úvod... 3 Důvody vzniku CSS... 4 Problémy s rádoby graficky dokonalými stránkami... 5 Řešení

Více

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam

Více

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr

Více

HTML. Verze 2009. Obsah:

HTML. Verze 2009. Obsah: HTML Verze 2009 Obsah: 1) Popis HTML...1 2) Základní popis jazyka...1 2.1) Struktura.html souboru...1 3) Hlavička dokumentu - Head...2 4) Tělo dokumentu - Body...3 5) Text a jeho formátování...5 5.1) Další

Více

www.helpmark.cz Tomáš Herout

www.helpmark.cz Tomáš Herout 4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi

Více

CSS Kaskádní styly. Založeno na přednášce Lukáše Bařinky

CSS Kaskádní styly. Založeno na přednášce Lukáše Bařinky CSS Kaskádní styly Založeno na přednášce Lukáše Bařinky Obsah Základní principy Syntaxe Selektory Dědičnost Formátovací model Generovaný obsah Média, UI Co se nevešlo... Základní principy Dopřená i zpětná

Více

Tvorba WWW stránek s využitím technologií (X)HTML, CSS, PHP a databází

Tvorba WWW stránek s využitím technologií (X)HTML, CSS, PHP a databází Tvorba WWW stránek s využitím technologií (X)HTML, CSS, PHP a databází Dosedla Martin HTML Úvod do (X)HTML Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové)

Více

Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border

Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Prvky rozdělující obsah article, aside, nav, section Header Footer Boxy Vlastnosti width height padding border

Více

Skripta ke školení. Autor: Tomáš Herout Telefon: (+420)

Skripta ke školení. Autor: Tomáš Herout   Telefon: (+420) Skripta ke školení Autor: Tomáš Herout E-mail: herout@helpmark.cz Telefon: (+420) 739 719 548 2017 Obsah CSS... 3 Co je to CSS... 3 Druhy selektorů... 4 Pseudotřídy a pseudoelementy nejpoužívanější z nich...

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Ing. Pavel BOHANES

Více

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace

Více

Vysoká škola báňská Technická univerzita Ostrava INTERNET A SÍTĚ. učební text. Marek Babiuch

Vysoká škola báňská Technická univerzita Ostrava INTERNET A SÍTĚ. učební text. Marek Babiuch Vysoká škola báňská Technická univerzita Ostrava INTERNET A SÍTĚ učební text Marek Babiuch Ostrava 2010 Recenze: Ing. Pavel Buřil Mgr. Jan Veřmiřovský Název: Internet a sítě Autor: Marek Babiuch Vydání:

Více

Předmluva k druhému vydání 13. Úvod 17. ČÁST 2 Vytváření dokumentů XML 65

Předmluva k druhému vydání 13. Úvod 17. ČÁST 2 Vytváření dokumentů XML 65 7 Stručný obsah Předmluva k druhému vydání 13 Úvod 17 ČÁST 1 Začínáme 27 Kapitola 1 Proč XML 29 Kapitola 2 Vytváření a zobrazení vašeho prvního dokumentu XML 45 ČÁST 2 Vytváření dokumentů XML 65 Kapitola

Více

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy)

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) 15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) Formátování HTML Každý text má obsah a formu. Když mluvím o formátu

Více

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek Označení: C8 Stručná charakteristika modulu Modul si klade za cíl seznámit detailněji s tvorbou webových stránek pomocí kódovacího jazyka

Více

Verze 2.1 MANUÁL. Redakční systém. REDAKTOR Junior

Verze 2.1 MANUÁL. Redakční systém. REDAKTOR Junior Verze 2.1 MANUÁL Redakční systém REDAKTOR Junior REDAKČ NÍ SYSTÉM Redaktor Junior v. 2.1 PRO ENGINEERING, s.r.o. Počernická 96, 108 03 Praha 10 Tel. 267 021 157 Fax 267 021 158 Obsah ÚVOD 1 SEKCE ŠABLONY

Více

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

Mgr. Vlastislav Kučera Struktura stránky, hlavička, Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to

Více

Webové stránky. 8. Pozadí webové stránky. CSS pozadí. Datum vytvoření: 18. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 8. Pozadí webové stránky. CSS pozadí. Datum vytvoření: 18. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 8. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 18. 10. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM

Více

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci Název modulu: Označení: C7 Stručná charakteristika modulu Modul vznikl za účelem úvodního seznámení zájemců o problematiku tvorby moderních webových stránek podle standardů W3C. Zahrnuje základní nezbytné

Více

Tvorba stránek v HTML ve Wordu

Tvorba stránek v HTML ve Wordu Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o

Více

Návrh webového obchodu

Návrh webového obchodu Bankovní institut vysoká škola Praha Katedra informatiky a kvantitativních metod Návrh webového obchodu Bakalářská práce Autor: Alyabyev Alexandr Informační technologie Vedoucí práce: Ing. Bohuslav Růžička,

Více

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení Tématická oblast: dědičnost, kaskáda CSS a média Stylové předpisy pro různé typy zobrazovacích zařízení Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je ( Ing. Petr Měrka). VY_32_INOVACE_185

Více

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné

Více

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného

Více

13. Vytváření webových stránek

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot> Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky

Více

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem CSS styly - úvod Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem Formátování HTML Každý text má obsah a formu. Když mluvím o formátu

Více

Pseudotřídy. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

Pseudotřídy. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34. Pseudotřídy Využití pseudotříd pro stylování odkazů ve webových dokumentech Pseudotřídy VY_32_INOVACE_01_03_01 Vytvořeno březen 2013 Žák se naučí smysluplně využívat pseudotříd pro stylování odkazů ve

Více