CSS Kaskádní styly. Založeno na přednášce Lukáše Bařinky
|
|
|
- Vítězslav Bílek
- před 5 lety
- Počet zobrazení:
Transkript
1 CSS Kaskádní styly Založeno na přednášce Lukáše Bařinky
2 Obsah Základní principy Syntaxe Selektory Dědičnost Formátovací model Generovaný obsah Média, UI Co se nevešlo...
3 Základní principy Dopřená i zpětná kompatibilita Doplněk ke strukturovanému dokumentu Nezávislost na platformě/zařízení Udržovatelnost Jednoduchost Síťová šetrnost Flexibilita Bohatost jazyka Návaznost s alternativními jazyky Přístupnost [accessibility] Od CSS3 se specifikace dělí na moduly například css3-background, css3-box, atd.
4 CSS Historie
5 Syntaxe I Styl je skupina pravidel, které určují vzhled dokumentu. Pravidlo h1 { color: blue selektor vlastnost hodnota deklarace
6 Syntaxe II Použití v HTML <html> <head> <title>title</title> <link rel="stylesheet" type="text/css" href=" title="cool"> <style url(" h1 { color: blue p.yellow { color: yellow #colg { color: green </style> </head> <body> <h1>headline is blue</h1> <p style="color: green">while the paragraph is green. <p class="yellow">this paragraph is yellow <p id="colg">while the paragraph is green. </body> </html>
7 Syntaxe III Case insensitive (kromě částí mimo CSS např. selektor) Klíčová slova (red) / Řetězce ( red ) Blok uzavřen do { Sada pravidel v bloku oddělená ; Pravidla je možné seskupovat [grouping] h1 { color: red h2 { color: red h1, h2 { color: red h1 h1 h1 h1 { { { { font-size: 12pt font-weight: bold font-family: Helvetica font: bold 12pt Helvetica Komentáře uvnitř /* a */ (povoleny jsou <!- a -->, nejsou však CSS komentářem) Kódování ISO
8 Syntaxe IV - Hodnoty Délkové: RELATIVNÍ em velikost fontu ex velikost písmena x px obrazový bod % ABSOLUTNÍ in palce cm mm pt body (1/72 in) pc 12pt Potomek od svého rodiče nedědí relativní hodnotu, ale dědí vypočítanou absolutní hodnotu!
9 Syntaxe V Hodnoty II URI RELATIVNÍ url( bg.jpg ) ABSOLUTNÍ url( ) Barvy red (klíčové slovo) #f00 (#rgb) #ff0000 (#rrggbb) rgb(255,0,0) rgb(100%,0%,0%) Pozadí / obrázek url( bg.jpg ) Písmo Helvetica serif sans-serif cursive fantasy monospace
10 Selektory * Univerzální selektor E Selektor typu E F Seletor potomka E > F Selektor přímého potomka (syna) E + F Selektor sourozence E:first-child Pseudotřída first-child E:link Pseudotřída link E:hover Dynamická pseudotřída E:lang(x) Pseudotřída lang E[atr= val ] Selektor atributu ( = ~= = ) E.class Selektor třídy E#id Selektor ID
11 Mnoho dalších selektorů v CSS 3 E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:disabled E:checked E:not(s) E ~ F an E element whose "foo" attribute value begins exactly with the string "bar" an E element whose "foo" attribute value ends exactly with the string "bar" an E element whose "foo" attribute value contains the substring "bar" an E element, root of the document an E element, the n-th child of its parent an E element, the n-th child of its parent, counting from the last one an E element, the n-th sibling of its type an E element, the n-th sibling of its type, counting from the last one an E element, last child of its parent an E element, first sibling of its type an E element, last sibling of its type an E element, only child of its parent an E element, only sibling of its type an E element that has no children (including text nodes) an E element being the target of the referring URI a user interface element E that is enabled a user interface element E that is disabled a user interface element E that is checked (for instance a radio-button or checkbox) an E element that does not match simple selector s an F element preceded by an E element
12 Pseudotřídy Definují speciální vlastnosti pro některé prvky. Příslušnost ke třídě může vznikat dynamicky. Potomka :first-child Linku :link :visited Dynamické :hover :active :focus Jazyka :lang
13 Pseudoelementy Neexistující elementy, které vznikají z logiky uspořádání dokumentu :first-line p:first-line { text-transform: uppercase :first-letter p:first-letter { text-transform: uppercase; font-size: 200%; font-style: italic; font-weight: bold; float: left; :before p.special:before { content: Special! :after
14 Dědičnost I Hodnota se určí pomocí: Výsledku posloupnosti pravidel (kaskády) Jinak se použije zděděná hodnota (rodiče) Jinak se použije počáteční (inicializační) hodnota Některé hodnoty se dědí, jiné ne body { color: black; hodnota se dědí background: white; hodnota se nedědí h1 { font-height: 120% 120% hodnoty rodiče Styly mohou pocházet od autora uživatele UA (user agent) např. prohlížeče
15 Dědičnost II Pro určení výsledu posloupnosti stylů (kaskády) je potřeba: 1. Najít všechny deklarace vázané na element (pro dané médium) 2. Seřadit je podle důležitosti UA < uživatel < autor < autor!important < uživatel!important 3. Seřadit je podle specifičnosti pravidla přesněji určující selektory mají přednost před obecnými 4. Seřadit je podle pořadí výskytu použije se pozdější pravidlo Pro ovlivnění důležitosti pravidla slouží!important p { font: normal 12pt sans-serif!important
16 Dědičnost - Výpočet a atribut style b počet ID atributů * li li:first-line ul li ul ol+li h1 + *[rel=up] ul ol li.red li.red.level #x34y style="" { { { { { { { { { c počet ostatních atributů a pseudotříd d počet jmen elementů a pseudoelementů /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
17 Formátovací model Box model left MT BT PT PB BB MB top Margin Border Padding Content ML BL PL PR BR MR right bottom Pozadí zasahuje až do orámování (border), okraje (margin) jsou vždy průhledné.
18 Formátovací model II LI Content 1 LI Padding LI Margin LI Padding LI Margin UL Padding UL Margin LI Content 2 over several lines max (MB, MT) <ul> <li> LI 1 </li> <li> LI 2 over... </li> </ul>
19 Orámování - Borders border-width <délka> thin medium thick border-color <color> transparent border-style none dotted double ridge outset h1 { border-width: thin h1 { border-width: thin thick h1 { border-width: thin thick medium h1 { border-width: thin thick medium 5px hidden solid groove inset h1 { border: 0.5em solid silver
20 Vizuální formátování I vlastnost display block b1 b2 table inline-block b1 b2 inline-table inline b1 b2 b3 table-column list-item b1 b2 table-caption none table-row run-in b3 b1 b4 b2 table-cell...
21 Vizuální formátování II vlastnost position static relative absolute fixed offset (kromě static) top right bottom left float left right none vlastnost clear left right both none hladina z-index auto <hladina> směr textu direction ltr (left to right) rtl (right to left)
22 Vizuální formátování III width, min-width, max-width height, min-height, max-height line-height, text-indent, text-align text-decoration, letter-spacing, wordspacing vertical-align (baseline, middle, sub, super, texttop, text-bottom, top, bottom) overflow (visible, hidden, scroll, auto) clip (auto, rectl(t,r,l,b)) visibility (visible, hidden, collapse)
23 Generování obsahu Použití pseudoelementů :before a :after content normal <řetězec> <uri> counter open-quote, close-quote no-open-quote, no-close-quote attr(x) quotes none [ <string1> <string2> ]+
24 Generování obsahu II Čítače a seznamy counter-reset counter-increment Čítače je možné do sebe vnořovat (seznamy) counters Použití: counter(name) counter(name, style) style: (disc, circle, square, none, upper-latin, upper-roman, hebrew) list-style-type (disc, circle, square, decimal, decimal-leading-zero, lower/upper-roman, georgian, armenian, lower/upper-latin, lower/upper-alpha, lower-greek) list-style-image list-style-position (outside, inside)
25 Média CSS jsou nezávislé na platformě/cílovém zařízení, umí ale definovat různé styly pro různé cíle definice pomocí url( screen.css ) print {... all, braile, embossed, handheld, print, projection, screen, speech, tty, tv definice stránkovaného Zlom stránek pomocí page-break-before/after/inside auto, always, avoid, left, right orphans widows
26 User Interface Specifikace kurzoru pomocí cursor auto, crosshair, default, pointer, move, e/ne/nw/n/...-resize, text, wait, progress, help, <url> Použití barev uživatelského rozhraní odkaz na barvy UI pomocí jména (např. ButtonFace, ButtonText, Menu, Scrollbar, Window,...)
27 Co se jinam nevešlo Tabulky Tabulky table-layout (auto, fixed) border-collapse (collapse, separate) border-spacing (<délka> <délka>) empty-cells (show, hide) vertical-align (baseline, top, bottom, middle, sub, super, text-top, textbottom, <délka>, %
28 Co se jinam nevešlo II Práce s bílými znaky pomocí white-space normal, pre, nowrap, pre-wrap, pre-line Práce s písmem font-family font-style (normal, italic, oblique) font-variant (normal, small-caps) font-weight ( ) font-size Práce s textem text-indent text-align (left, right, center, justify) text-decoration (none, underline, overline, line-through, blink) text-transform (capitalize, uppercase, lowercase, none)
29 NĚCO NAVÍC
30 nebo Nadstavby pro tvorbu CSS Less ( Sass Stylus Formátovací styly Překladač do CSS Interpret CSS (prohlížeč) Formátovací styly Překladač Interpret CSS (prohlížeč)
31 Co CSS chybí a nadstavby mají Ukázky // #4D926F; #header { h2 { /* Výsledné CSS */ #header { color: #4D926F; h2 { color: #4D926F;
32 Vnořování // LESS #header { h1 { font-size: 26px; font-weight: bold; p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px /* Výsledné CSS */ #header h1 { font-size: 26px; font-weight: bold; #header p { font-size: 12px; #header p a { text-decoration: none; #header p a:hover { border-width: 1px;
33 Výpočty // #842210; #header { * 3; * 2; #footer { + #003300; border-color: desaturate(@red, 10%); /* Výsledné CSS */ #header { color: #333; border-left: 1px; border-right: 2px; #footer { color: #114411; border-color: #7d2717;
34 Děkuji za pozornost
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
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
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
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...
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...
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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
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
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í
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
Cascading Style Sheets CSS Selektory Selektory
CSS JohanSebastianBachwasaprolificomposeṙ Bach'shomepage TITLE> BODY>Bach'shomepage H1> 1{color:red} h STYLE> HEAD>
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. 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é
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
1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11
Obsah 3 1: Úvod 9 Dříve než začnete......................... 9 Co a kde v knize naleznete....................... 9 Zdroje............................... 10 Doporučení pro další studium.....................
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
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
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í
Káskádové styly = CSS
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ý
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
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í
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
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í
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
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
(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
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...
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
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
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
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
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
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í
Ú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í
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
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
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
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 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ý
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
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
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
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
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
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
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
CSS Paged Media aneb Gutenberg v prohlížeči Jirka Kosek
1/20 CSS Paged Media aneb Gutenberg v prohlížeči 2/20 Papír stále ještě není mrtev knížky tištěné katalogy tiskové výstupy z aplikací (např. faktury) 3/20 HTML everywhere HTML se stává nejpoužívanějším
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
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
š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
<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í
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
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
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
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
Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.
Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Číslo: Anotace: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových
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í
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»
Š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
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
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
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
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
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
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
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Skriptování dokumentu - DOM 2 BI-JSC Evropský
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
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,
Ú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.
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)
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
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
školení frontend Organizace CSS
školení frontend Organizace CSS organizace CSS Nastavení editoru Editor Config http://editorconfig.org zajistí stejné formátování kódu Prettier https://prettier.io/ hlídá řádky mezi selektory, čárky v
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í
QUADRIO. Description. Spatial Data m /m + VAT CZK/m + VAT m Praha, Spálená/Purkyňova 1
Domovská Stránka / Kanceláře kategorie A / QUADRIO QUADRIO 11000 Praha, Spálená/Purkyňova 1 Office Rental Fee (m / měsíc) 18.55-1.47 /m + VAT Service Charge: - Volné prostory : Min. Kancelářské prostory
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é
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
Dokumentace k ročníkové práci
Dokumentace k ročníkové práci 1) Cílem mé práce bylo udělat webové stránky splňující všechny požadavky zadání ročníkové práce. Zároveň jsem se však snažil lidem sdělit, o čem je hra Counter-Strike: Source,
tvoříme web Bootstrap
tvoříme web Bootstrap 15. 9. 2018 Zlín Co s načatou sobotou V rychlosti zopakujeme základy HTML a CSS Dozvíme se něco o responsivitě Projdeme si úskalí responsivních webů Dáme jídlo Zjistíme, k čemu nám
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
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
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...
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é
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
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
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
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í
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.
Rozvržení stránky. Co se v modulu dozvíte? Pozicování
Rozvržení stránky Co se v modulu dozvíte? jakým způsobem je možné uspořádat prvky na stránce jak lze prvky překrývat jak fungují plovoucí prvky Pozicování Pro rozmístění prvků na stránce je možné použít
User manual SŘHV Online WEB interface for CUSTOMERS June 2017 version 14 VÍTKOVICE STEEL, a.s. vitkovicesteel.com
1/ 11 User manual SŘHV Online WEB interface for CUSTOMERS June 2017 version 14 2/ 11 Contents 1. MINIMUM SYSTEM REQUIREMENTS... 3 2. SŘHV ON-LINE WEB INTERFACE... 4 3. LOGGING INTO SŘHV... 4 4. CONTRACT
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
Neprogramuj, pokud to není nezbytně nutné. Michal Lupečka
Neprogramuj, pokud to není nezbytně nutné Michal Lupečka Kolik osob na tom dělá? grafik kodér programátor copywriter / content editor CSS bude mít na starosti vzhled! Co už se nemusí programovat? mobilní
Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT
Dnešní téma Oblasti standardizace v ICT Případové studie standardizace v ICT: 1) Znakové sady 2) Jazyk 1. technická infrastruktura transfer a komunikace informací, přístup k informacím, sdílení zdrojů
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
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).
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ů
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
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
CSS (Cascading Style Sheets) Jak se zapisují? externí soubory s koncovkou.css. přímo do www stránky
CSS (Cascading Style Sheets) Jak se zapisují? externí soubory s koncovkou.css přímo do www stránky Externí soubory: stránka se styly