Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.

Prezentace na téma: "Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li."— Transkript prezentace:

1 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/34.0809. Formátování písma 1 9. Prosince 2012VY_32_INOVACE_160313_Formatovani_pisma-DUM

2 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Externí šablony kaskádových stylů Styly jsou definovány v externím souboru. Platí pro všechny dokumenty, s nimiž je šablona propojena. Soubor s deklaracemi stylů používá příponu.css. Šablona je s dokumentem provázána pomocí značky link. Ta je umístěna v hlavičce dokumentu – sekce head. S webovou stránkou je možné propojit více.css souborů. Příklad: 2

3 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Struktura pravidla CSS Šablona kaskádových stylů se skládá z pravidel stylů. Každé pravidlo má dvě části: selektor, deklerace vlastností. Obecný zápis selektor {vlastnost1: hodnota; vlastnost2:hodnota;} Příklad zadání konkrétních parametrů p{font-family: Arial, Tahoma, Verdana, sans-serif; font-size:90%; color:white; background-color:blue;} 3

4 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Druh písma, font Vlastnost font-family určuje použitý typ písma. Můžeme zapsat jednu nebo více hodnot oddělených čárkou. Pokud použijeme víceslovný název fontu, musíme je vložit do uvozovek (jednoduchých nebo dvojitých). Typ písma je vhodné doplnit obecnou rodinou písma. Obecné rodiny písma serif standardní patkové písmo sans-serif standardní bezpatkové písmo cursive kurzivové (psané) písmo fantasy ozdobné písmo monospace neproporcionální písmo Příklady použití: html { font-family: Tahoma, Arial, Verdana, sans-serif } body { font-family: Garamond, Georgia, "Times New Roman", serif } 4

5 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Nastavení velikosti písma Vlastnost font-size určuje velikost písma. Příklady: h1{font-size:110%} p{font-size:0.8em} 5

6 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Jednotky velikosti v CSS Rozlišujeme dva druhy jednotek CSS: Relativní – velikost je závislá na typu, velikosti písma zvoleného tvůrcem webu, nebo na rozlišení obrazovky uživatele. Absolutní – velikost se odvozuje z platných jednotek délky a je nezávislá na velikosti a typu písma, nebo na rozlišení obrazovky. 6

7 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Absolutní jednotky mm – milimetr cm – centimetr in – palec, jeden palec je roven 2,54cm pt – bod, jeden bod je roven 1/72 palce pc – pica, jeden pica je 12 bodů xx-small – nejmenší písmo, odpovídá asi 9 px x-small – velmi malé písmo, odpovídá asi 10 px small – malé písmo, odpovídá asi 13 px medium – střední písmo, odpovídá asi 16 px large – velké písmo, odpovídá asi 24 px x-large – velmi velké písmo, odpovídá asi 24 px xx-large – největší písmo, odpovídá asi 30 px 7

8 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Relativní jednotky px – pixel, obrazovkový bod em – velikost velkého písmene M u typu písma, které je definováno pro daný element ex – velikost malého písmene x % – procentuální vyjádření velikosti 8

9 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Syntaxe barvy v RGB Barvy na webu vycházejí ze specifikace RGB (red- green-blue) a jejich kombinací vzniká požadovaná barva. Obecný zápis: #RRGGBB #RGB #RGB(X, X, X) #RGB(Y%, Y%, Y%) 9

10 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklady použití Příklady: p {color: yellow} p { color: #FFFF00 } p { color: #FF0 } p { color: rgb(255, 255, 0) } p { color: rgb(100%, 100%, 0%) } 10

11 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Barva v CSS, slovní vyjádření Slovní formát pro webČesky Aquamodrozelená Blackčerná Bluemodrá Whitebílá Redčervená … 11

12 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Síla (tučnost) písma Vlastnost font-weight určuje sílu (tučnost) písma. Hodnoty: normal, bold, bolder, 100-900, inherit. h3 {font-weight:800} 12

13 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Styl písma Definici stylu písma provádíme pomocí vlastnosti font-style. Hodnoty: normal, italic, oblique, inherit. li {font-style:italic;} 13

14 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Vlastnost písma Vlastnost písma je určená vlastností font- variant. Hodnoty: normal, small-caps, inherit. h1,h2,h3 {font-variant:small-caps;} 14

15 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zadání komentářů Kód (x)html, css je možné doplnit komentáři, které nebude prohlížeč zpracovávat a zobrazovat. Syntaxe zápisu komentáře pro jazyk html, css je odlišná. HTML CSS /*zde se umístí komentář pro CSS*/ 15

16 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Své znalosti si zopakujte v zde. Kvíz 16

17 Title of the document The content of the document...... Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje: JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: Computer Press, 2006. ISBN 80-251-0773-6. STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: Computer Press, 2003, 178 s. ISBN 80-7226-872-4. GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: Zoner Press, 2011, 286 s. Encyklopedie webdesignera. ISBN 978-80-7413-166-0. W3C. Kaskádové styly: domovská stránka [online]. 2012-05- 06, 06:20:10 [cit. 2012-12-09]. Dostupné z: http://www.w3.org/Style/CSS/Overview.cs.html KOČIČKA, Pavel a Filip BLAŽEK. Praktická typografie. Vyd. 2. Praha: Computer Press, 2004, xiv, 288 s. ISBN 80-722-6385-4. 17