1 / 17

Formátování písma

9. Prosince 2012. VY_32_INOVACE_160313_Formatovani_pisma-DUM. Formátování písma. Externí šablony kaskádových stylů.

emerson-carlson
Télécharger la présentation

Formátování písma

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 9. Prosince 2012 VY_32_INOVACE_160313_Formatovani_pisma-DUM Formátování písma

  2. 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: <link rel=“stylesheet“ type=“text/css“ tref=“css/styly.css“ media=“screen“ />

  3. 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;}

  4. 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 cursivekurzivové (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 }

  5. Nastavení velikosti písma Vlastnost font-sizeurčuje velikost písma. Příklady: h1 {font-size:110%} p {font-size:0.8em}

  6. 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.

  7. 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

  8. 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

  9. 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%)

  10. 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%) }

  11. Barva v CSS, slovní vyjádření Slovní formát pro web Česky Aqua modrozelená Black černá Blue modrá White bílá Red červená …

  12. 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}

  13. Styl písma Definici stylu písma provádíme pomocí vlastnosti font-style. Hodnoty: • normal, • italic, • oblique, • inherit. li {font-style:italic;}

  14. Vlastnost písma Vlastnost písma je určená vlastností font-variant. Hodnoty: • normal, • small-caps, • inherit. h1,h2,h3 {font-variant:small-caps;}

  15. 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 <!—komentář na webové stránce--> CSS /*zde se umístí komentář pro CSS*/

  16. Své znalosti si zopakujte v zde. • Kvíz

  17. Zdroje: • JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: ComputerPress, 2006. ISBN 80-251-0773-6. • STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: ComputerPress, 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: ZonerPress, 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: ComputerPress, 2004, xiv, 288 s. ISBN 80-722-6385-4.

More Related