Káskádové styly = CSS
|
|
|
- Markéta Havlíčková
- před 6 lety
- Počet zobrazení:
Transkript
1 1/31 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í CSS lze nadefinovat společný vzhled souboru stránek v HTML bez podpory CSS vzhled definován pro každou značku zvlášť, typicky pomocí značky <font>, HTML5 ji již nepodporuje nyní standard CSS reálně CSS 3 CSS je tvořen pravidly ve tvaru selektor { vlastnost1: hodnota; vlastnost2: hodnota;... } selektor seznam značek, kterých se uvedená pravidla týkají
2 Příklady: h1 { } Káskádové styly = CSS color:red; /* červená barva písma */ background:yellow; /* žlutá barva pozadí */ 2/31 h1,h2,h3 {color:red;}/* pravidla platí pro h1, h2, h3*/ h1 {color:red;} /* alternativní zápis výše uvedeného */ h2 {color:red;} h3 {color:red;} ol ol {color:red;} /* 2. úroveň uspořádaného seznamu */
3 CSS možnosti definice stylů 3/31 lokální definice stylů platí v rámci značky globální definice stylů platí v rámci HTML dokumentu externí definice stylů lze použít pro libovolný HTML dokument Při použití různých typů definic se uplatňuje kaskáda v pořadí LOKÁLNÍ GLOBÁLNÍ EXTERNÍ definice V pořadí EXTERNÍ GLOBÁLNÍ LOKÁLNÍ definice se naopak uplatňuje dědičnost výjimkou je nastavení váhy pravidla má vliv na vícenásobnou definici stejného stylu pro stejný element h1 {color: blue!important}
4 4/31 Lokální definice stylů na úrovni jednotlivých značek HTML platí jen v rámci použité značky styly se vkládají pomocí atributu style přímo do značky: <h1 style="color:red;font-size:30px;">červený nadpis</h1> definice celého odstavce: <p style="color:red;font-weight:bold;">tučný odstavec</p> definice celé stránky: <body style="color:red;background:black;">...</body>
5 5/31 Globální definice stylů na úrovni HTML dokumentu definice se vkládají do hlavičky dokumentu mezi značky <style> a </style> <head> <title>globální definice stylů</title> <style type="text/css"> h1 { color:red;font-size:30px; } p { color:red;font-weight:bold; } </style> </head>
6 6/31 Externí definice stylů pro jeden či více HTML dokumentů nejvýhodnější společný styl souboru stránek snadná změna vzhledu stránek pouze úprava CSS CSS v samostatném souboru do HTML se vkládá pomocí nepárové značky <link> v hlavičce <head> <title>externí definice stylů</title> <link rel="stylesheet" type="text/css" href="styly.css" media="screen" /> </head> atribut rel specifikuje, že jde o CSS atribut type tzv. MIME typ, specifikace CSS ve formě textu atribut href cesta k externímu CSS souboru media určuje výstupní zařízení
7 7/31 Externí definice stylů atribut media určuje, pro jaké výstupní zařízení se má použít specifikovaný styl media="screen" zobrazení na monitoru media="print" tisk media="handheld" mobilní zařízení (nízké rozlišení) media="aural" hlasové syntetizéry lze nastavit hlasitost, barvu media="all, projection, tv, braille" Media Queries v CSS3 styly podmíněné parametry zařízen (rozměry, rozlišení, orientace) <link rel="stylesheet" href="bigscreen.css" media="screen and (min-width: 1100px)"> <link rel="stylesheet" href="iphoneandandroid.css" media="screen and (max-device-width: 480px)"> <link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
8 Základní použití CSS stylů 8/31 barva, případně obrázek na pozadí typy písma a jeho formátování velikost a obtékání okraje, rámečky zarovnávání seznamy styly odkazů
9 Nastavení pozadí (dokumentu) 9/31 pozadí dokumentu selektor body pozadí buňky tabulky, odstavce, bloku selektor td, p, div pro nastavení barev lze použít předdefinované názvy (17), hexadecimální tvar (např. # černá), RGB zápis rgb(255,0,0) body { background-color: red; /* nastavení barvy pozadí */ background-color:#0000ff; /* color:rgb(0,0,255);*/ background-image:url(pozadi.gif); /* obrázek */ } p { background-image:url(pozadi.gif); background-repeat:repeat-x; background-repeat: no-repeat; background-position: top right; background-attachment: scroll (fixed); }
10 Typy písma a jeho formátování 10/31 barva písma vlastnost color pozadí písma vlastnost background h1 { color:red; background-color: yellow; } vlastnost font-family p { font-family:arial; font-family:sans-serif; font-family:'arial CE','Verdana CE',Arial,Verdana, sans-serif; } vlastnost font-size (v jednotkách px, pt, mm, %, em) p { font-size:12px; }
11 Typy písma a jeho formátování 11/31 vlastnost font-weight tučnost písma (normal, bold, ) p { font-weight:bold; } vlastnost font-style kurzíva (normal, italic) p { font-style:italic; } font-variant kapitálky (normal, small-caps) sdružená vlastost font p { font: italic small-caps bold 12px arial } Kdekoli v HTML dokumentu lze používat klasické značky pro formátování písma - <b>, <i>, <strong>, <em> atd.
12 Externí fonty formou relativní cesty nebo URL podporované formáty TTF, OTF, WOFF, latin extended 12/31 { div { font-family: Sansation; font-family: Sansation; src: url(sansation_light.woff); } } url( t=latin,latin-ext); <link href=' set=latin,latin-ext' rel='stylesheet' type='text/css'> font-family: 'Open Sans', sans-serif; /* CSS */
13 13/31 fonty místo obrázků, úspora dat IcoMoon App Icon fonts
14 14/31 Velikost a obtékání, práce s blokem uvedené vlastnosti se vztahují k blokovému elementu vlastnost width šířka rodiče (px, pt, em, %, auto) vlastnost height výška rodiče (px, pt, em, %, auto) vlastnost float umístění obtékaného objektu (left, right, none) vlastnost clear ukončení obtékání objektů (left, right, both, none) vlastnost display především možnost skrytí bloku (např. tisk) definice řádkového/blokového prvku vlastnost position nastavení pozice bloku v dokumentu vlastnost overflow nastavení obsahu bloku při při jeho přetečení (visible, hidden, auto) vlastnost figure (figurecaption) obtékání obrázků (popisků)
15 15/31 Okraje a rámečky mají význam u blokových elementů vlastnost margin šířka vnějšího okraje (auto, px, pt, em, %) margin-top (right, bottom, left) u tabulek cellspacing vlastnost padding šířka vnitřního okraje (px, pt, %) padding-top (right, bottom, left) u tabulek cellpadding vlastnost border rámeček kolem blokového elementu (px, pt) border-width (px), border-top-width (atd.) border-color border-style (solid, dotted, dashed, groove atd.) border-top: solid 1px red;
16 Okraje a rámečky 16/31 border-color:red; border-style:solid; border-style:dashed; border: solid green 4px; border-style:dotted; border-width (thin, medium, thick, hodnota) border-style (dotted, dashed, solid, double, groove, ridge, in(out)set border-color border-top, border-right, border-bottom, border-left margin, margin-top, margin-right,... (auto, hodnota, %) padding, padding-top, padding-right,... (auto, hodnota, %) box-sizing: border-box
17 17/31 Zarovnávání a úpravy textu text-align horizontální zarovnání v bloku (left, right, center) vertical-align vertikální zarovnání v td (top, middle, bottom,!pouze pro řádkové elementy) text-decoration none, underline, overline, line-through, blink text-transform none, capitalize, uppercase, lowercase letter-spacing, word-spacing mezery mezi písmeny, slovy text-indent odsazení prvního řádku white-space (normal, pre, nowrap) chování bílých znaků
18 18/31 Ostatní nastavení čáry <hr /> různá podpora prohlížečů, nejlépe takto: <hr style="border-style:solid; border-width:1px; border-color:red" width="50%" align="left" /> border-collapse v tabulce spojí rámečky sousedních buněk (collapse)
19 19/31 Styly hypertextových odkazů (pouze) pro značku <a> existují speciální pseudotřídy a:link {color:#00ff00;} /* barva nenavštíveného odkazu */ a:visited {color:#00ff00;} /* barva navštíveného odkazu */ a:hover {color:red;} /* barva odkazu pod kurzorem myši */ a:active {color:red;} /* barva odeslanéhho odkazu */ Pseudotřída :hover pro další elementy <p class= hover >Změna textu</p> pro styl p.hover:hover {color:red;}
20 CSS3 pseudotřídy li:first-child, li:last-child, li:only-child, li:nthchild(2) p:nth-last-child(2) p:first-letter p:first-line 20/31 p:first-of-type, p:last-of-type, p:nth-of-type(2), p:nthof-type(2n+1), p:only-of-type p.nth-last-of-type(2)
21 Styly seznamů 21/31 vlastnosti značek <ul>, <ol>,<li> list-style-image (url) list-style-type (disc, circle, square, decimal, lower-roman, upperroman, lower-alpha, upper-alpha, lower-greek, hebrew,...) list-style-position (inside, outside) zarovnání sdružená vlastnost list-style ul { } list-style:decimal outside;
22 22/31 Třídy a identifikátory efektivní využití vlastních stylů třídu kaskádového stylu určuje atribut class třídy lze používat v rámci XHTML dokumentu opakovaně Třídy vztahující se k použité značce p {color:red;} /* nastavení stylu odstavců */ p.zeleny {color:green;} /* některé budou zelené */ <p>tento odstavec bude červený.</p> <p class="zeleny">druhý odstavec bude zelený.</p>
23 23/31 Obecné třídy pro všechny značky Třídy a identifikátory p {color:red;} /* nastavení stylu odstavců */ h1 {color:red;} /* nastavení stylu nadpisu h1 */.zeleny {color:green;} /* zelené písmo kdekoli */ <p>tento odstavec bude červený.</p> <p class="zeleny">druhý odstavec bude zelený.</p> <h1>červený nadpis</h1> <h1 class="zeleny">zelený nadpis</h1> NEBO <p class="zeleny">všechno v tomto odstavci, co není jinak definováno v CSS, bude napsáno zeleným písmem. </p>
24 Třídy a identifikátory 24/31 identifikátor kaskádového stylu určuje atribut id v XHTML dokumentu lze identifikátor použít pouze jednou spíše pro blokové prvky #zahlavi {color:green; /* formát záhlaví stránky */ background:yellow;} <div id="zahlavi">záhlaví stránky</div>
25 25/31 Značky <div> a <span> jediné dvě značky, které nenesou žádný význam ( nemají) ideální pro potřeby CSS <div class="obalovaci"> <p class="obalovaci"> <p>odstavec</p> <p>odstavec</p> <p>další odstavec</p> <p>další</p> </div> </p> <div> je element blokový, <span> je element řádkový, neboli <div> před a za sebou zalomí řádek, <span> nikoli <div> by se neměl vyskytovat v rámci řádkové značky
26 CSS3 výběr podle atributů 26/31 element[atribut*="hodnota"] element[atribut^="hodnota"] element[atribut$="hodnota"] a[href^="https"] hodnota href začíná https a[href$=".pdf"] hodnota href končí.pdf a[href*="upce"] hodnota href obsahuje upce Další CSS3 selektory
27 27/31 Výběr nových vlastností CSS3 uvedené vlastnosti nepodporuje IE<9 HTML5Shiv border-radius <div style="-webkit-border-radius:50px; -moz-borderradius:50px; border-radius:50px; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px;">objekt</div> box-shadow (horizontálně, vertikálně, šířka, barva) <div style="-webkit-box-shadow:10px 5px 20px #000; -mozbox-shadow:10px 5px 20px #000; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px; box-shadow:10px 5px 20px #000;">Objekt</div> -webkit = safari, opera, -moz = mozilla, -ms = IE
28 text-shadow (jako u box-shadow) 28/31 <span style="-webkit-text-shadow:15px 10px 15px #000; -moztext-shadow:15px 10px 15px #000; text-shadow:15px 10px 15px #000; font-size:50px; color:#808080;">text</span> transform (translate) <style type="text/css">.objekt{float:left;margin:5px 10px;width:100px;height:60px; background-color:gray;color:#fff;text-align:center; -webkit-transition:all 1s ease-in-out; /* typ animace */ -moz-transition:all 1s ease-in-out}.objekt1:hover{ -webkit-transform:translate(3em,1em); -moz-transform:translate(3em,1em)} </style> <div class="objekt objekt1">translate</div> <div style="clear:both;"></div>
29 29/31 transform (rotate) <style type="text/css">.objekt{float:left;margin:5px 10px;width:100px;height:60px; background-color:gray;color:#fff; text-align:center;-webkittransition:all 1s ease-in-out;-moz-transition:all 1s easein-out;}.objekt2:hover{ -webkit-transform:rotate(100deg); -moz-transform:rotate(100deg)} </style> <div class="objekt objekt2">rotate</div> <div style="clear:both;"></div>
30 30/31 transform (scale) <style type="text/css">.objekt{float:left;margin:5px 10px;width:100px;height:60px; background-color:gray;color:#fff; text-align:center;-webkittransition:all 1s ease-in-out;-moz-transition:all 1s easein-out;}.objekt3:hover{-webkit-transform:scale(2);-moztransform:scale(2)} </style> <div class="objekt objekt3">scale</div> <div style="clear:both;"></div>
31 průhlednost (opacity) <div style="opacity:0.5; width:200px; height:60px; color:#000; text-align:center; lineheight:50px;background>red;">průhledný objekt</div> 31/31 průhlednost (barevný model RGBA) <div style="background-color:rgba(100, 0, 0, 0.5); width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">průhledný objekt</div> sloupce (multiple columns) <div style= width:250px;-moz-column-count:2; -moz-columngap:10px; -webkit-column-count:2; -webkit-column-gap:10px; column-count:2; column-gap:10px;">text bude rozdělen do dvou sloupců! </div> pozadí (multiple backgrounds) background: url('left.jpg') top left no-repeat, url('prvni.jpg') top right no-repeat, url('druhy.jpg') top center repeat-x;
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í
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
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
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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í
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
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
1. Přímo vložený styl
CSS 1. Přímo vložený styl 2. Šablona stylu v dokumentu 3. Externí šablony stylů 4. Syntaxe stylů 5. Třídy stylů 6. Vlastnosti písma 7. Vlastnosti barvy a pozadí 8. Vlastnosti textu 9. Vlastnosti obdelníku
CSS styly. Cascading Style Sheets kaskádové styly
CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen
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...
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...
Tvorba webových stránek
Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený
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...
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á
Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD
Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu
tvoříme web HTML/CSS
tvoříme web HTML/CSS 22. 4. 2018 Zlín HTML/CSS Co s načatou nedělí Pochopíme k čemu slouží HTML a CSS Naučíme se pár nových slovíček Vytvoříme webovou stránku v HTML Dáme jídlo Pomocí CSS dodáme stránce
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
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
Styl textu CSS 1. Pět obecných kategorií: Serif pátkova písma Pro text těla, zejména pro tisk, a hodí se i pro záhlaví. Times, Georgia,...
Styl textu CSS 1 Volba písmap Pět obecných kategorií: Serif pátkova písma Pro text těla, zejména pro tisk, a hodí se i pro záhlaví. Times, Georgia,... Styl textu CSS 2 Volba písmap Serifs mají 3 základní
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í
CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako
CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako absolutně pozicované bloky)
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
Kaskádové styly (CSS)
Kaskádové styly (CSS) Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar ČERBA Západočeská univerzita v Plzni Vznik dokumentu: 20.11.2007 Poslední aktualizace: 5.11.2009 Cascading Style Sheets
(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
CSS. Internetové publikování
CSS Internetové publikování 1 Problémy Spousta zbytečného kódu Omezená podpora minoritních platforem, počítačů Přemíra grafiky dlouhá doba načítání Závislost na rozlišení Obtížná údržba dokumentů Drobné
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
Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou
Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány
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
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
Úvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
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
CSS kaskádové styly a jejich využití při tvorbě internetových stránek
Základní škola Dr. E. Beneše, Praha 9 Čakovice, nám. J. Berana 500 Ročník 9. A CSS kaskádové styly a jejich využití při tvorbě internetových stránek Školní rok: 2010 / 2011 Vypracoval: Michal Kolář Vedoucí
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
<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura
mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění
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
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ý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
HTML Hypertext Markup Language
HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé
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
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
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
Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: 3. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.
Webové stránky 5. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 3. 10. 2012 Webové Strana: 1/11 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM
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
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
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
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
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
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
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
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
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
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_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_92_IVT_HTML_12_nase_www Ing. Pavel BOHANES
Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.
Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink)
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
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
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
22. Tvorba webových stránek
22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči
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
HTML - Úvod. Zpracoval: Petr Lasák
HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají
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
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
Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka
1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka - definuje vztah k jiným
12. Základy HTML a formuláře v HTML
12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura
Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy,
Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy, Nadpisy Odstavce, zalamování řádku Zvýraznění textu Obrázky Odkazy Bloky, označené části řádku Komentáře Vlastnosti textu color, font-family, font-size,
IM I PL P EM E EN E TA T C A E E C SS S S 3 V V P R P OH O LÍŽ Í EČ E ÍC Í H Dominik Fišer (c) Dominik Fišer 2008
IMPLEMENTACE CSS 3 V PROHLÍŽEČÍCH (c) Dominik Fišer 2008 Dominik Fišer http://www.doser.cz CSS verze 3 předchozí verze CSS 2.1 stále Candidate Recommendation na CSS 3 se pracuje již mnoho let návrh změny
Child selektory. Adjacent sibling selektory. Pseudoelementy. Atributové selektory. Tabulky. Obtékané elementy. »!!!
CSS 3. část Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Vztahy mezi elementy Vztahy mezi elementy» Parent» An element A is called
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
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
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
<link> - definuje vztah k jiným XHTML dokumentům, typicky
Návrh a tvorba WWW stránek 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka
Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014
Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat
Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant
Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu
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).
Základy HTML (2. přednáška)
Základy HTML (2. přednáška) WWW World Wide Web Sestává ze tří stavebních bloků Síť informačních zdrojů Universal Resource Identifier jednotný způsob jak adresovat zdroje, (URL) protokoly pro přístup ke
Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová
Název projektu: Podpora výuky v technických oborech Registrační číslo projektu: CZ.1.07/1.5.00/34.0458 Název šablony: V/2 Inovace a zkvalitnění výuky směřující k rozvoji odborných kompetencí žáků středních
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
Základy HTML. Autor: Palito
Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete
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
Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz
Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz CZ.1.07/2.2.00/15.0247 Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. Internet
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
školení frontend CSS Preprocesory
školení frontend CSS Preprocesory CSS preprocesory Preprocesory Způsob zápisu, který zjednodušuje a zrychluje tvorbu CSS Přidává do CSS další funkce a nástroje, snaží se řešit slabiny CSS Snaží se řešit
Tvorba webu. Základní HTML tagy. Martin Urza
Tvorba webu Základní HTML tagy Martin Urza Cvičení V průběhu přednášky budou postupně probírány jednotlivé základní elementy jazyka HTML a jejich atributy. Nemá smysl tyto věci probírat jen teoreticky
Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML
Čtvrtek 11. dubna Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje
Kaskádové styly základy grafiky
1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod
Úvod do tvorby internetových stránek v jazyce HTML
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
Internet 02 - Tvorba statických www stránek za pomoci HTML tagů
Tagy Jak bylo uvedeno na předchozích stránkách, tag je vlastně značka, podle které se prohlížeč řídí. Tag určuje, jakým způsobem bude stránka upravena. Například - teď zarovnej text doprava, nyní zvětši
Cascading Style Sheets CSS Selektory Selektory
CSS JohanSebastianBachwasaprolificomposeṙ Bach'shomepage TITLE> BODY>Bach'shomepage H1> 1{color:red} h STYLE> HEAD>
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í
Základy HTML. Obecná syntaxe HTML. Struktura HTML
Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů
Tvorba webových stránek
Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok
Jihočeská univerzita v Českých Budějovicích
Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Formátování www stránek pomocí CSS Level 3 Bakalářská práce Josef Lombart Vedoucí práce: PaedDr. Petr Pexa ČESKÉ BUDĚJOVICE
Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování
Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie
Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML
Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací
Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML
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í
1. Základní kostra HTML dokumentu
1. Základní kostra HTML dokumentu HTML dokument se skládá z tzv. značek (tagů). Značky zapisujeme mezi znaky < >. Většina značek je párových, což znamená, že značku je třeba ukončit. Koncová značka je
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení
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...
Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky 03, HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra
Tvorba WWW stránek. Mgr. Petr Jakubec. Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu
Tvorba WWW stránek (čtvrtá hodina) Mgr. Petr Jakubec Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu 12 Čtvrtá hodina 1 / 12 1 Tvorba statických WWW stránek za využití prostředků