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,...
|
|
|
- Ilona Kopecká
- před 7 lety
- Počet zobrazení:
Transkript
1 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,...
2 Styl textu CSS 2 Volba písmap Serifs mají 3 základní funkcí: utvořít spojení mezi písmény a tím usnadnit čtění udržovát mezery mezi písmény pomáha rozlišovat jednotliva písména, zejména horníčást písmén která je více důležita pro čtění než spodníčast Sans-serif bezpátkova písma Většínou zaoblená a šírší. Pro záhlaví, pro text na obrazovce. Arial, Helvetica, Verdana,...
3 Styl textu CSS 3 Volba písmap Monospace neproporcionální písma. Všechna písmena mají stejnou šířku (fixed-pitch). Použivají pro vzorky kódu programů a pro tabulky. Courier,... pitch
4 Styl textu Volba písmap Srovnání odstavců: CSS 4 Monospace (neproporcionální) písma mohou být změřeny podle počtu písmen na jeden inch (palec): 10 characters per inch 10-pitch písmo je 12pt 1 inch 12-pitch písmo je 10pt (palec 2,54 cm)
5 Styl textu CSS 5 Volba písmap Fantasy dekorativní písma s neobvyklýmí funkcemí. Použivají jako parafa (monogram), pro nadpisy v románách a pohádkách. Galleria, ZurichCalligraphic, Western,... Drop cap (padací písmeno) je první písmeno članku nebo odstavce. Je zvětšeno i umístěno tak že obsadí několik řadků. (drop capital letter)
6 Styl textu CSS 6 Volba písmap Cursive označované jako ručně psané písmo. Pro grafické prvky a dekorativní typografické prvky návrhu. Lucida, Handwriting,... Schéma písemp sem: - Zvolte jedno písmo, obecný serif nebo sans-serif, a použivejte stejné písmo pro všechno. Měňte velikost, šířku, barvu a ostatní styly. - Zvolte dvě písma, obecný serif a obecný sans-serif. Používejte sans-serif pro všechny nadpisy a popisky. Serif používejte pro text těla.
7 CSS 7 Aplikování rodin písma p na text Vyberete text a pak v něm použijete vlastnost font-family a odpovidající hodnotu. Hodnoty: 1) název písma; 2) klíčové slovo rodiny písem; 3) řada jmen, nasledovaných klíčovým slovem rodiny písem. 1) Názvy jednotlivých písem. body{ font-family: Arial; } Pokud uživatel nemá písmo Arial na svém počítačí, prohlížeč použije výchozi písmo (většínou Times). 2) Klíčová slova pro rodiny písem. Odpovídají názvům rodin písem: serif, sans-serif, monospace, fantasy a coursive. h1 {font-family: fantasy;} Problem: nemáte kontrolu nad tím, které písmo to bude. Poslední možnost h1{font-family:arial, sans-serif;} Příklad. Nastavení písem v prvcích stránky. body {font-family: Times, Georgia, serif;} h1,h2{font-family: Arial, Helvetica, sans-serif;}
8 Velikost písem Vlastnost font-size s hodnoty zadané: - absolutné - relativně - hodnotou - procentuální hodnotou CSS 8 1) Klíčová slova pro absolutní a relativní nastavení velikosti. Klíčová slova: xx-small, x-small, small, medium, large, x-large, xx-large (absolutní) p{font-size: medium;} Klíčová slova: smaller, larger (relativní) Vztahují se vždy k již definované velikosti. 2) Hodnoty velikosti. Zahrnují 3 relativní a 5 absolutních hodnot. Relativní hodnoty: em, px Absolutní hodnoty: pt, in, mm, cm
9 CSS 9 Velikost písem 72 points Písmo zabírá jenom 3/4 výšky 1 point = 0,3527 mm 1 point = 1/72 inch
10 CSS 10 Velikost písem Hodnota em <html> <head> <style type= text/css > h1 { font-size: 2em; } </style> </head> <body> <h1>movies</h1> </body> </html> 1 em c em měrná jednotka, rovnající se Pt (právě použivaného písma) 3) Hodnoty v procentech. Jsou vždy relativní vůči jíné hodnotě. body { font-size: 1 em; } h1 { font-size: 150% ;}
11 Šířka písmap Šířka znamená, nakolik tučné písmo bude. Vlastnost font-weight. Hodnoty: -číselné hodnoty ( ) - klíčové slovo ( normal odpovídá šířce 400; bold 700; bolder dálší větší šířka; lighter dálší menší šířka ) body { font-family:times, Georgia, serif; font-size: 1em; font-weight: normal; } h1,h2 { font-family:arial, Helvetica, sans-serif;} h1 { font-size: 150%; font-weight:bold;} h2 { font-size: 130%; font-weight:lighter;} CSS 11
12 Styl písma Pomáhají měnit řez Vlastnost font-style s hodnotou: - normal (zajístit zobrazení textu v normalní šířce) - italic (vytváří kurzivu) CSS 12 Barva textu Barva textu Vlastnost color body { font-family: Times, serif; font-size: 1em; font-weight: normal; color:black; } h1, h2 { font-family: Arial, sans-serif; } h1 { font-size:150%; font-weight: bold; color: #999; } h2 { font-size: 130%; font-weight: lighter; font-style: italic; color: #333; }
13 Zarovnání textu Vlastnost text-align. Hodnoty: - left; - center; - right; - justify. CSS 13 Dekorace textu Vlastnost text-decoration. Hodnoty: - none (používá se k odstranění výchozího podtržení odkazů) - underline - overline (umistuje čáru nad vybraný text) - line-through (umistuje čáru přes vybraný text) - blink (kromě Internet Explorer) Příklad. Dekorace textu pomocí CSS <p style= text-decoration:underline; >Tento text je podtržený</p> <p style= text-decoration:overline; >Tento text má nad sebou čáru</p> <p style= text-decoration:line-through; >Tento text je přeškrtnutý</p> <p style= text-decoration:blink; >Tento text bliká</p>
14 CSS 14 Odsazení prvního řádku textu Vlastnost text-indent p { text-indent: 45px; } p { text-indent: 40%; } vůči ohraničujícímu rámečku elementu Záporné hodnoty pro předsazení textu. Převod textu a varianty písma Převod textu na malá a velká písmena. Vlastnost text-transform Hodnoty: - capitalize - uppercase - lowercase - none Varianty písma Vlastnost font-variant Hodnoty: - small-caps - normal ( výchozí hodnota )
15 CSS 15 Příklad. Převod a varianty textu v CSS. <head> <title>práce se styly</title> <style type= text/css > body { font-family: Times, serif; color: black; } h1 { font-family: Arial; font-size: 24px; font-variant: small-caps; } h2 {font-family: Times; color:#999; font-size: 18px; font-style:italic; text-transform: lowercase; }.accent { font-weight: 700; color: red; text-transform: uppercase; } p { font-size: 16px; text-transform: capitalize; } </style> </head> <body> <h1> Na trh vstupuje silné pivo</h1> <h2> Pivo </h2> <p> Dobrý den, v dnešních novinách jsem se dočetl, že v pivovaru v <span class= accent >Ústí nad Labem</span> začali vařit jednadvacetistupňové pivo.</p> </body>
16 Nastavení výšky řádku Výška řádku je vzdálenost mezi řádky textu. Vlastnost line-height s hodnotami: - délkovými -číselnými - procentuálními Příklad. <p style= line-height: 20px; > Text 1. </p> <p style= line-height: 2; > Text 2. </p> <p style= line-height: 65%; > Text 3. </p> CSS 16 Mezery mezi písmeny p a slovy Vlastnosti letter-spacing a word-spacing Příklad. <p style= letter-spacing: 10px; > Text 1. </p> <p style= word-spacing: 0.5 em; > Text 2. </p>
17 CSS 17 Úpravy prvních písmen p a prvních řádků textu Pomocí selektorů pseudoelementů můžete nastavovat styl prvního písmene (iniciály) a prvního řádku textu. : first-line : first-letter Příklad. Využíti selektorů pseudoelementů. <p: first-line { font-weight: bold; color:#333; } <p: first-letter { font-style:italic; color:#999; } Souhrnné nastavení písma Zahrnuje některé vlastnosti písma a výšky řádku. (nikoliv vlastnosti textu) Souhrnná vlastnost font. Pořadí hodnot: font-style, font-variant, font-weight, font-size / line-height, font-family p { font: italic small-caps bold 14px / 15px Arial, sans-serif; }
18 CSS 18 Efekty odkazů 1. Stavy odkazů link (před aktivováním) visited (po použití) hover (pod kurzorem myši) active (po klepnutí na odkaz) pseudotřídy dynamické pseudotřídy Selektory pro nastavování odkazů: :link :visited :hover :active Příklad. a { color:orange; } a: link { color:orange; } a: visited { color:yellow; } a: hover { color:fuchsia; } a: lactive { color:red; } Pořadí je důležité!
19 Změna stylů odkazu Přidávání barvy pozadí pro stav hover a { color: orange; } a:link { color: orange; } a:visited { color: yellow; } a:hover { color: fuchsia; font-style: italic; } a:active { color: red; } CSS 19 Odstranění podtržení odkazu (vlastnost text-decoration: none;) a { color: orange; text-decoration: none; } Podtržení pouze ve stavu hover a:hover { text-decoration: underline; }
20 CSS 20 Více stylů odkazů CSS umožňuje mít v jednom dokumentu více než jeden styl odkazů. Např. Oblast navigace s modrým pozadím a oblast s obsahem s bílým pozadím. Aplikace stylů odkazů pomocí tříd /* implicitní styly odkazů pro oblast s obsahem */ a { color: orange; text-decoration:none;} a:link { color: orange; } a:visited { color: yellow; } a:hover { color: fuchsia; } a:active { color: red; } /* styly odkazů pro oblast s navígací */ a.nav { color: white; text-decoration:none; } a.nav:link { color: white; } a.nav:visited { color: yellow; } a.nav:hover { color: orange; } a.nav:active { color: fuchsia; } Atribut class= nav v těch odkazů, jež mají použivat tuto třídu <a class= nav href= >Someweb</a>
21 CSS 21 Styly odkazů pomocí selektorů potomků Elementy mohou být jednoznačně identifikovány pomocí selektoru identifikátoru (id). Selektory (id) začinají mřížkou následovanou vlastním názvem # id name Postup aplikace: 1) Nejprve použijete selektor nadřazeného elementu, pak mezeru a pak element, pro nějž chcete nastavit styly (např. # nav a) Příklad. <head> <title>práce se styly</title> <style type= text/css > body { font:14px Times; color:white; background-color:black; } h1 { font:22px Arial; color:orange; text-decoration:underline; } h2 { font:italic 20px Times; color: red; background-color:black; } /* implicití nastavení odkazů */ a { color: orange; text-decoration:none;} a:link { color: orange; } a:visited { color: yellow; }
22 Styly odkazů pomocí selektorů potomků CSS 22 a:hover { color: fuchsia; text-decoration:underline; } a:active { color: red; } /* styly pro elementy obsažené v části example2 */ #example2 a { color: lime; } #example2 a:link { color: lime; } #example2 a:visited { color: red; } #example2 a:hover { color: aqua; text-decoration:underline; } #example2 a:active { color: fuchsia; } </style> </head> <body> <div id= example1 > <p>text-1.</p> </div> <div id= example2 > <p>text-2.</p> </div> </body>
23 CSS 23 Styly číslovaných seznamů Vlastnost list-style-type Hodnoty: decimal-leading-zero (číslovaní od nuly) lower-roman upper-roman (číslovanířímskýmíčíslicemí) ol {list-style-type:lower-roman; } Můžete nahradit čísla obrázky (vytvořte obrázky pro všechna čísla a pro každou položku seznamu použijte třídy). Příklad. Použítí tříd k aplikování obrázků v číslovaném seznamu. <head> <title>práce se styly</title> <style type= text/css >.list1 {list-style-image: url(1.gif);}.list2 {list-style-image: url(2.gif);}.list3 {list-style-image: url(3.gif);} </style> </head>
24 CSS 24 Styly číslovaných seznamů <body> <h1>computerworld</h1> <ol> <li class= list1 >Text-1.</li> <li class= list2 >Text-2.</li> <li class= list3 >Text-3.</li> </ol> </body> Styly nečíslovaných seznamů Mužete změnit odrážky, nahradit jí obrázkem a změnit polohu odrážky vůči textu. Nastavení ponocí jednoho ze tři klíčových slov: disc, circle a square. <h2>balík WAMP:</h2> <ul> <li style= list-type-style:disc; >PHP</li> <li style= list-type-style:circle; >Server Apache</li> <li style= list-type-style:square; >DB server MySQL</li> </ul>
25 Nahražení odrážku vlastním m obrázkem Vlastnost list-style-image <head> <title>práce se styly</title> <style type= text/css > ul {list-style-image: url(bullet.gif); } </style> </head> <body> <h1>balík WAMP:</h1> <ul> <li style= list-style-type:disc; >Text1</li> <li style= list-style-type:circle; >Text2</li> <li style= list-style-type:square; >Text3</li> </ul> </body> CSS 25 Vlastnost list-style-position s hodnotou outside nebo inside.
26 CSS 26 Souhrnné vlastnosti pro seznamy Vlastnost list-style <head> <title>práce se styly</title> <style type= text//css > body {font:14px Times; color:black; background-image:url(balloon.gif); background-position:right top; background-repeat:no-repeat;} h1 {font:italic 20px Times; color:red; text-transform:lowercase;} ul {list-style:url(arrow.gif) inside; } </style> </head> <body> <h1>balík WAMP</h1> <ul> <li>php</li> <li>server Apache</li> <li>db<br/>server MySQL</li> </ul> </body> Pokud nechcete obrázek, můžete jej nahradit klíčovým slovem.
27 CSS 27 Vertikální navigace založená na seznamu Kombinace: odkazy a seznamy. V nastavení stylů seznamu vlastnost list-style-type s hodnotou none. <head> <title>práce se styly</title> <style type= text/css > body{font:14px Times; color:black;} ul{ list-style-type:none; } a{color:orange; text-decoration:none;} a:link{color:orange;} a:visited{color:yellow;} a:hover{color:fuchsia; text-decoration:underline;} a:active{color:red;} </style> </head> <body> <ul> <li><a href= uvod.html >Úvodní stránka</a></li> <li><a href= produkty.html >Produkty</a></li> <li><a href= sluzby.html >Služby</a></li> </ul></body>
28 CSS 28 Vertikální navigační seznam s efekty obrázků Můžete použit obrázky na pozadí a selektor: hover. Příklad. Využítí obrázků pozadí k vytvoření sofistikovaných efektů navigace. body{font:bold 15px Times, serif; color:black;} a{color:white; text-decoration:none; display:block;} a:link{color:white;} a:visited{color:yellow;} a:hover{color:white; background-image:url(linkhover.gif);} a:active{color:red;} #nav, #nav a, #nav li {width:100px; margin:0; padding:0; list-style-type:none;} li{background-image:url(linkback.gif); border-bottom:3px solid white;} Výsledek navigace s vizuálními efekty.
29 CSS 29 Horizontální navigace založená na seznamu Vlastnost display:block slouzí k přepnutí odkazu z vloženého na blokový element. Vlastnost display:inline slouží k přepnutí odkazu na vložený element. <head> <title>práce se styly</title> <style type= text/css > body{font:14px Times; color:black;} ul #navlist {margin-left:0; padding-left:0; white-space:nowrap;} #navlist li{display:inline; list-style-type:none;} #navlist a{padding:3px 10px;} #navlist a, #navlist a:visited {color:white; background-color:orange; text-decoration:none;} #navlist a:hover{color:orange; background-color:yellow; text-decoration:none;} </style> </head>
30 Horizontální navigace založená na seznamu CSS 30 <body> <div id= navcontainer > <ul id= navlist > <li><a href= uvod.html >Úvod</a></li> <li><a href= produkty.html >Produkty</a></li> <li><a href= sluzby.html >Služby</a></li> </ul> </div> </body>
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
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
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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
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
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
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ý
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 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
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
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
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ý
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
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
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
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...
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...
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 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
(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
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
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,
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
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
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
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 - 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
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 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í
KASKÁDOVÉ STYLY - PÍSMO
KASKÁDOVÉ STYLY - PÍSMO Název školy Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště Název DUMu Kaskádové styly písmo Autor Zdeněk Hrdina Datum
<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í
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
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á
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
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
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
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
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
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
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
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é
KAPITOLA 5. Základní stylování seznamů
KAPITOLA 5 Stylování seznamů a vytváření navigačních lišt Je naší přirozeností dávat světu kolem nás nějaký řád. Vědci vytváří seznamy zvířat, rostlin a chemických prvků. V časopisech jsou seznamy deseti
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í
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
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é
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
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
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
Ú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í
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).
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
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
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
DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA:
1 DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA: Obsah CSS... 1 VKLÁDÁNÍ CSS DO HTML DOKUMENTU + MEDIA... 1 ADRESOVÁNÍ ČÁSTÍ HTML POMOCÍ SELEKTORŮ A JEJICH PRIORITA... 2 RESETOVÁNÍ CSS... 3 BARVY... 3 STYLOVÁNÍ
EU-OPVK:VY_32_INOVACE_FIL16 Vojtěch Filip, 2014
Číslo projektu CZ.1.07/1.5.00/34.0036 Tématický celek Inovace výuky ICT na BPA Název projektu Inovace a individualizace výuky Název materiálu Microsoft Word jednoduchý dokument Číslo materiálu VY_32_INOVACE_FIL16
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
K 2 - Základy zpracování textu
Radek Maca Makovského 436 Nové Město na Moravě 592 31 tel. 0776 / 274 152 e-mail: rama@inforama.cz http://www.inforama.cz K 2 - Základy zpracování textu Mgr. Radek Maca Word I 1 slide ZÁKLADNÍ POJMY PRVKY
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
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
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
www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_20 Databáze Databáze Databáze Projekt II. Ing. Petr Vilímek
VY_32_INOVACE_33_20 Pracovní list Škola Název projektu, reg. č. Vzdělávací oblast Vzdělávací obor Tematický okruh Téma Tematická oblast Název Autor Vytvořeno, pro obor, roč. Anotace Přínos/cílové kompetence
KAPITOLA 3 - ZPRACOVÁNÍ TEXTU
KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého
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
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í
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í
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
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
INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu
POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní
Č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
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
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
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,
Normalizovaná úprava písemností ČSN
Normalizovaná úprava písemností ČSN 01 6910 www.zlinskedumy.cz 3. Textový sloupec Zahrnuje: Papíry a formáty papíru Druhy a velikost písma Mezery - probrané v samostatné kapitole spolu s pevnými spojeními
www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_19 Databáze Databáze Databáze Ing. Petr Vilímek
VY_32_INOVACE_33_19 Pracovní list Škola Název projektu, reg. č. Vzdělávací oblast Vzdělávací obor Tematický okruh Téma Tematická oblast Střední průmyslová škola Zlín Inovace výuky prostřednictvím ICT v
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
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
Textové editory. Ing. Luděk Richter
Textové editory Ing. Luděk Richter Střední škola, Havířov-Šumbark, Sýkorova 1/613, příspěvková organizace Tento výukový materiál byl zpracován v rámci akce EU peníze středním školám - OP VK 1.5. Výuková
INTERSTENO 2015 Budapest World championship professional Word Processing
OPERAČNÍ SYSTÉM WORD PROCESSING SOFTWARE (TEXTOVÝ PROCESOR) ID SOUTĚŽÍCÍHO Úloha A-1 Instrukce pro účastníky Otevřete dokument YEAROFLIGHT, ihned ho uložte/převeďte do YEAROFLIGHTXXX.DOC NEBO DOCX, kde
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
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
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
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
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í
Webová grafika, struktura webu a navigace, použitelnost a přístupnost
Webová grafika, struktura webu a navigace, použitelnost a přístupnost Martin Kuna martin.kuna@seznam.cz Obsah Webová grafika Rozvržení stránky Typografické zásady Nejčastější chyby Struktura webu a navigace
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
Ú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.
Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017.
Beamer - Elektronické publikování - VŠB - TUO 23. dubna 2009 Obsah 1 2 3 4 5 6 Obsah 1 2 3 4 5 6 schémata barvy písma změna fontu vnitřní schémata vnější schémata Obsah Prezentace bez navigace e stromovou
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
9. Tagy tvorba www stránky pomocí tagů
9. Tagy tvorba www stránky pomocí tagů Tagy Jak bylo uvedeno v předchozím odstavci, 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ď
Formátování obsahu adminweb
Formátování obsahu adminweb verze 24032015 1 Obsah 1. Možnosti formátování textu...3 2. Formátování v editoru...4 3. Tabulka pro pozicování obsahu...5 4. Tabulka se stylem... 6 5. Šablony...7 6. Obrázky
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
Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.
Úprava textu Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů). Fyzické formátování Fyzické formátování říká, jak má který
š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
<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
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
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