Formátování písma

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>

<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>

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 2012 VY_32_INOVACE_160313_Formatovani_pisma-DUM





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ápisselektor {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, fontVlastnost 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ísmaserif standardní patkové písmosans-serif standardní bezpatkové písmocursive kurzivové (psané) písmofantasy ozdobné písmomonospace 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ísmaVlastnost font-size určuje velikost písma.Příklady:h1 {font-size:110%}p {font-size:0.8em}





6

Jednotky velikosti v CSSRozliš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 RGBBarvy 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 ČeskyAqua modrozelenáBlack černáBlue modráWhite bíláRed červená…





12

Síla (tučnost) písmaVlastnost 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

http://oa-opava-eu.ic.cz/Sonnek/VY_32_INOVACE_160313_Formatovani_pisma_KVIZ.htm





17

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.

Formátování písma

Documents

Transcript of Formátování písma