1 / 51

Laboratório de Informática Propriedades CSS: Fontes

Bruno C. de Paula. Laboratório de Informática Propriedades CSS: Fontes. 1º Semestre 2009 > PUCPR > BSI. Resumo da aula. Após finalizarmos nosso trabalho com os seletores do CSS, é chegado o momento de conhecer as principais propriedades do CSS ;

bedros
Download Presentation

Laboratório de Informática Propriedades CSS: Fontes

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. Bruno C. de Paula Laboratório de InformáticaPropriedades CSS:Fontes 1º Semestre 2009 > PUCPR > BSI

  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. 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 • Capítulo do Livro CSS – Guia de Bolso: • http://altabooks.tempsite.ws/capitulos_amostra/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/

  5. Material referente ao assunto da aula • Portal sobre tipografia da Microsoft: • http://www.microsoft.com/typography/default.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/04/01/design-para-cssers-tipografia-parte-ii/ • http://www.luli.com.br/2008/04/07/design-para-cssers-tipografia-parte-iii/

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

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

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

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

  10. Exemplos da aula • Fontes; • Personalidade das fontes; • Exemplo serifa; • Exemplo serifa2; • Propriedade font-family; • Famílias genéricas; • Propriedade font-size;

  11. Exemplos da aula • font-size absoluto; • font-size relativo; • font-size comprimento absoluto; • font-size comprimento relativo; • font-size comprimento absoluto 2; • font-size porcentagem;

  12. Exemplos da aula • Propriedade font-weight; • Propriedade font-style; • Propriedade font-variant; • Representação resumida.

  13. Relembrando as aulas passadas...

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

  15. Assunto de hoje: propriedades e valores!

  16. “Transformação” de ie6 em ie7 <!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]--> “Transformação” de ie6-7 em ie8 <!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]--> Exemplo

  17. Há diversas famílias de fontes

  18. Cada fonte possui uma personalidadediferente

  19. Fontes possuem uma anatomia bem definida

  20. Desenvolvido por Paulo de Loyola

  21. Fontes podem ter serifas(sobre)

  22. Exemplo

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

  24. font-family

  25. Família genéricaColocar como último valor

  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.

  27. Exemplo

  28. font-size:Valor absoluto • Depende do navegador.

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

  30. font-size:Comprimento absoluto • 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. Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho!

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

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

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

  35. 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. Observe a diferença no “gia”!

  37. font-variant:texto em maiúsculas • O valor small-caps faz as letras minúsculas parecerem pequenas letras maiúsculas;

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

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

  40. 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 • Capítulo do Livro CSS – Guia de Bolso: • http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf

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

  42. Material referente ao assunto da aula • Portal sobre tipografia da Microsoft: • http://www.microsoft.com/typography/default.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/04/01/design-para-cssers-tipografia-parte-ii/ • http://www.luli.com.br/2008/04/07/design-para-cssers-tipografia-parte-iii/

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

More Related