Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.

Apresentação em tema: "Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

2 Resumo da aula Após finalizarmos nosso trabalho com os seletores do CSS, é chegado o momento de conhecer as principais propriedades do CSS; Nosso objetivo hoje será conhecer as propriedades que lidam com fontes.

3 3 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): http://www.w3.org/TR/CSS21/selector.html #pattern-matching http://www.w3.org/TR/CSS21/selector.html #pattern-matching Capítulo do Livro CSS – Guia de Bolso: http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf

4 Material referente ao assunto da aula Tutoriais sobre fontes em CSS: http://www.maujor.com/tutorial/fonttut.php http://www.maujor.com/w3ctuto/fonts.html http://pt-br.html.net/tutorials/css/lesson4.asp Fontes para web designers: http://dev.opera.com/articles/view/fonts-for-web- design-a-primer/ http://dev.opera.com/articles/view/fonts-for-web- design-a-primer/ 4

5 Material referente ao assunto da aula Portal sobre tipografia da Microsoft: http://www.microsoft.com/typography/defa ult.mspx http://www.microsoft.com/typography/defa ult.mspx Design para CSSers (I, II e III): http://www.luli.com.br/2008/03/27/design- para-cssers-tipografia-parte-i/ http://www.luli.com.br/2008/03/27/design- para-cssers-tipografia-parte-i/ http://www.luli.com.br/2008/04/01/design- para-cssers-tipografia-parte-ii/ http://www.luli.com.br/2008/04/01/design- para-cssers-tipografia-parte-ii/ http://www.luli.com.br/2008/04/07/design- para-cssers-tipografia-parte-iii/ http://www.luli.com.br/2008/04/07/design- para-cssers-tipografia-parte-iii/ 5

6 Material referente ao assunto da aula CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo 6

7 7 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

8 8 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

9 9 Propriedades CSS referenciados na aula (em Inglês –site SitePoint)SitePoint font-family: seleciona a família da fonte; font-family font-size: escolhe o tamanho da fonte; font-size font-weight: espessura da fonte (negrito); font-weight font-style: estilo da fonte (itálico, etc); font-style font-variant: texto em maiúsculas Small- caps; font-variant font: forma abreviada. font

10 Relembrando as aulas passadas... 10

11 11 Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

12 Assunto de hoje: propriedades e valores! 12

13 Transformação de ie6 em ie7 13 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"> Transformação de ie6-7 em ie8

14 Há diversas famílias de fontes 14

15 Cada fonte possui uma personalidade diferente 15

16 Fontes possuem uma anatomia bem definida 16

17 17 Desenvolvido por Paulo de LoyolaPaulo de Loyola

18 Fontes podem ter serifas (sobre)sobre) 18

19 19 Exemplo

20 Propriedades CSS tipográficas de fonte font-family: seleciona a família da fonte; font-family font-size: escolhe o tamanho da fonte; font-size font-weight: espessura da fonte (negrito); font-weight font-style: estilo da fonte (itálico, etc); font-style font-variant: texto em maiúsculas Small- caps; font-variant font: forma abreviada. font 20

21 21 font-family

22 Família genérica Colocar como último valor 22

23 font-size: Tipos de valor Valor absoluto: xx-small, x-small, small, medium, large, x-large, xx- large; Valor relativo: larger, smaller; Comprimento: em, ex, px, in, cm, mm, pt, pc. Porcentagem. 23

24 24 Exemplo

25 font-size: Valor absoluto Depende do navegador. 25

26 font-size: Valor relativo Maior (larger) ou menor (smaller); Relativo ao pai do elemento; 26

27 font-size: Comprimento absoluto 27 Cuidado: mapeamento do monitor para a tela pode não ser preciso; Não funciona com 2 monitores. cm: centímetros; mm: milímetros; in: polegadas (2,54 cm); pt: pontos (1/72 de polegada); pc: picas (12 pontos);

28 28

29 29

30 Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho! 30

31 font-size: Comprimento relativo em: refere-se ao tamanho da fonte, útil para tamanhos relativos em fontes e para deixar o site acessível; ex: refere-se à altura da letra x (altura x) da fonte; px: cada ponto na tela de um monitor é um pixel. Problema atual: usuário usa resoluções muito diferentes: 1024x768, 800x600, 1024x600, 1680x1050, 240x320, 320x240. 31

32 32

33 font-size: Comprimento em % 1em = 100% 1.2em = 120% Porcentagem é em relação ao font-size do elemento pai; 33

34 34

35 font-weight: espessura do texto (negrito) 35 Na prática, os valores não estão implementados na maior parte dos navegadores. Ver: http://clagnut.com/blog/2228/http://clagnut.com/blog/2228/

36 font-style: estilo da fonte Itálico corresponde ao manuscrito e não à letra ser inclinada; Oblíquo corresponde ao inclinado; Por exemplo: Existe Georgia itálica e não existe Georgia oblíqua; Existe Helvética oblíqua e não existe Helvética itálica. 36

37 37

38 38 13/1/2014

39 Observe a diferença no gia! 39

40 font-variant: texto em maiúsculas O valor small-caps faz as letras minúsculas parecerem pequenas letras maiúsculas; 40 13/1/2014

41 Representação resumida font: [style] [variant] [weight] [size]/[line- height] [family] [fontes sistema]; [size] e [family] são obrigatórios; [fontes sistema] deve estar isolado. 41

42 Fontes do sistema caption: botões, selects; icon: ícones; menu: menus; message-box: caixas de mensagem; small-caption: rótulos de controles pequenos; status-bar: rótulo de barra de status. 42

43 43

44 44 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): http://www.w3.org/TR/CSS21/selector.html #pattern-matching http://www.w3.org/TR/CSS21/selector.html #pattern-matching Capítulo do Livro CSS – Guia de Bolso: http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf

45 Material referente ao assunto da aula Tutoriais sobre fontes em CSS: http://www.maujor.com/tutorial/fonttut.ph p http://www.maujor.com/tutorial/fonttut.ph p http://www.maujor.com/w3ctuto/fonts.htm l http://www.maujor.com/w3ctuto/fonts.htm l http://pt- br.html.net/tutorials/css/lesson4.asp http://pt- br.html.net/tutorials/css/lesson4.asp Fontes para web designers: http://dev.opera.com/articles/view/fonts- for-web-design-a-primer/ http://dev.opera.com/articles/view/fonts- for-web-design-a-primer/ 45 13/1/2014

46 Material referente ao assunto da aula Portal sobre tipografia da Microsoft: http://www.microsoft.com/typography/defa ult.mspx http://www.microsoft.com/typography/defa ult.mspx Design para CSSers (I, II e III): http://www.luli.com.br/2008/03/27/design- para-cssers-tipografia-parte-i/ http://www.luli.com.br/2008/03/27/design- para-cssers-tipografia-parte-i/ http://www.luli.com.br/2008/04/01/design- para-cssers-tipografia-parte-ii/ http://www.luli.com.br/2008/04/01/design- para-cssers-tipografia-parte-ii/ http://www.luli.com.br/2008/04/07/design- para-cssers-tipografia-parte-iii/ http://www.luli.com.br/2008/04/07/design- para-cssers-tipografia-parte-iii/ 46 13/1/2014

47 Material referente ao assunto da aula CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo 47 13/1/2014