Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.

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

1 Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > 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 313/1/2014 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): – http://www.w3.org/TR/CSS21/selecto r.html#pattern-matching http://www.w3.org/TR/CSS21/selecto r.html#pattern-matching Capítulo do Livro CSS – Guia de Bolso: – http://altabooks.tempsite.ws/capitulo s_amostra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulo s_amostra/00_cssbolso.pdf

4 Material referente ao assunto da aula Tutoriais sobre fontes em CSS: – http://www.maujor.com/tutorial/fontt ut.php http://www.maujor.com/tutorial/fontt ut.php – http://www.maujor.com/w3ctuto/font s.html http://www.maujor.com/w3ctuto/font s.html – 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/fo nts-for-web-design-a-primer/ http://dev.opera.com/articles/view/fo nts-for-web-design-a-primer/ 413/1/2014

5 Material referente ao assunto da aula Portal sobre tipografia da Microsoft: – http://www.microsoft.com/typograph y/default.mspx http://www.microsoft.com/typograph y/default.mspx Design para CSSers (I, II e III): – http://www.luli.com.br/2008/03/27/d esign-para-cssers-tipografia-parte-i/ http://www.luli.com.br/2008/03/27/d esign-para-cssers-tipografia-parte-i/ – http://www.luli.com.br/2008/04/01/d esign-para-cssers-tipografia-parte-ii/ http://www.luli.com.br/2008/04/01/d esign-para-cssers-tipografia-parte-ii/ – http://www.luli.com.br/2008/04/07/d esign-para-cssers-tipografia-parte-iii/ http://www.luli.com.br/2008/04/07/d esign-para-cssers-tipografia-parte-iii/ 513/1/2014

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

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

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

9 913/1/2014 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 1013/1/2014 Exemplos da aula Fontes; Fontes Personalidade das fontes; Personalidade das fontes Exemplo serifa; Exemplo serifa2; Exemplo serifa2 Propriedade font-family; Propriedade font-family Famílias genéricas; Famílias genéricas Propriedade font-size; Propriedade font-size

11 Exemplos da aula font-size absoluto; font-size absoluto font-size relativo; font-size relativo font-size comprimento absoluto; font-size comprimento absoluto font-size comprimento relativo; font-size comprimento relativo font-size comprimento absoluto 2; font-size comprimento absoluto 2 font-size porcentagem; font-size porcentagem 1113/1/2014

12 Exemplos da aula Propriedade font-weight; Propriedade font-weight Propriedade font-style; Propriedade font-style Propriedade font-variant; Propriedade font-variant Representação resumida. Representação resumida 1213/1/2014

13 Relembrando as aulas passadas... 1313/1/2014

14 1413/1/2014 Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

15 Assunto de hoje: propriedades e valores! 1513/1/2014

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

17 Há diversas famílias de fontes famílias de fontes 1713/1/2014

18 Cada fonte possui uma personalidade diferente personalidade diferente 1813/1/2014

19 Fontes possuem uma anatomia bem definida 1913/1/2014

20 2013/1/2014 Desenvolvido por Paulo de LoyolaPaulo de Loyola

21 Fontes podem ter serifas (sobre) serifassobre) 2113/1/2014

22 2213/1/2014 Exemplo

23 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 2313/1/2014

24 2413/1/2014 font-family

25 Família genérica Família genérica Colocar como último valor 2513/1/2014

26 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. 2613/1/2014

27 2713/1/2014 Exemplo

28 font-size: Valor absoluto Valor absoluto Depende do navegador. 2813/1/2014

29 font-size: Valor relativo Valor relativo Maior (larger) ou menor (smaller); Relativo ao pai do elemento; 2913/1/2014

30 font-size: Comprimento absoluto Comprimento absoluto 3013/1/2014 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);

31 3113/1/2014

32 3213/1/2014

33 Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho! 3313/1/2014

34 font-size: Comprimento relativo 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. 3413/1/2014

35 3513/1/2014

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

37 3713/1/2014

38 font-weightfont-weight: espessura do texto (negrito) 3813/1/2014 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/

39 font-stylefont-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. 3913/1/2014

40 4013/1/2014

41 4113/1/2014

42 Observe a diferença no gia! 4213/1/2014

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

44 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. 4413/1/2014

45 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. 4513/1/2014

46 4613/1/2014

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

48 Material referente ao assunto da aula Tutoriais sobre fontes em CSS: – http://www.maujor.com/tutorial/fontt ut.php http://www.maujor.com/tutorial/fontt ut.php – http://www.maujor.com/w3ctuto/font s.html http://www.maujor.com/w3ctuto/font s.html – 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/fo nts-for-web-design-a-primer/ http://dev.opera.com/articles/view/fo nts-for-web-design-a-primer/ 4813/1/2014

49 Material referente ao assunto da aula Portal sobre tipografia da Microsoft: – http://www.microsoft.com/typograph y/default.mspx http://www.microsoft.com/typograph y/default.mspx Design para CSSers (I, II e III): – http://www.luli.com.br/2008/03/27/d esign-para-cssers-tipografia-parte-i/ http://www.luli.com.br/2008/03/27/d esign-para-cssers-tipografia-parte-i/ – http://www.luli.com.br/2008/04/01/d esign-para-cssers-tipografia-parte-ii/ http://www.luli.com.br/2008/04/01/d esign-para-cssers-tipografia-parte-ii/ – http://www.luli.com.br/2008/04/07/d esign-para-cssers-tipografia-parte-iii/ http://www.luli.com.br/2008/04/07/d esign-para-cssers-tipografia-parte-iii/ 4913/1/2014

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

51 5113/1/2014 Próximas aulas de CSS Propriedades CSS: – Textos, imagens e fundos.