Form tov n p sma
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

Formátování písma PowerPoint PPT Presentation


  • 95 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

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“ />


Struktura pravidla css

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


Druh p sma font

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-serifstandardní bezpatkové písmo

cursivekurzivové (psané) písmo

fantasyozdobné písmo

monospaceneproporcionální písmo

Příklady použití:

html { font-family: Tahoma, Arial, Verdana, sans-serif }

body { font-family: Garamond, Georgia, "Times New Roman", serif }


Nastaven velikosti p sma

Nastavení velikosti písma

Vlastnost font-sizeurčuje velikost písma.

Příklady:

h1{font-size:110%}

p{font-size:0.8em}


Jednotky velikosti v css

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.


Absolutn jednotky

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


Relativn jednotky

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


Syntaxe barvy v rgb

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


P klady pou it

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


Barva v css slovn vyj d en

Barva v CSS, slovní vyjádření

Slovní formát pro webČesky

Aquamodrozelená

Blackčerná

Bluemodrá

Whitebílá

Redčervená


S la tu nost p sma

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}


Styl p sma

Styl písma

Definici stylu písma provádíme pomocí vlastnosti font-style.

Hodnoty:

  • normal,

  • italic,

  • oblique,

  • inherit.

    li {font-style:italic;}


Vlastnost p sma

Vlastnost písma

Vlastnost písma je určená vlastností font-variant.

Hodnoty:

  • normal,

  • small-caps,

  • inherit.

    h1,h2,h3 {font-variant:small-caps;}


Zad n koment

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*/


Form tov n p sma

  • Své znalosti si zopakujte v zde.

    • Kvíz


Zdroje

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.


  • Login