1 / 47

Laboratório de Informática CSS Seletores Fontes em CSS

Bruno C. de Paula. Laboratório de Informática CSS Seletores Fontes em CSS. 1º Semestre 2010 > 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 ;

elise
Download Presentation

Laboratório de Informática CSS Seletores Fontes em CSS

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áticaCSS SeletoresFontes em CSS 1º Semestre 2010 > 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. Relembrando as aulas passadas...

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

  12. Assunto de hoje: propriedades e valores!

  13. “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]-->

  14. Há diversas famílias de fontes

  15. Cada fonte possui uma personalidadediferente

  16. Fontes possuem uma anatomia bem definida

  17. Desenvolvido por Paulo de Loyola

  18. Fontes podem ter serifas(sobre)

  19. Exemplo

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

  21. font-family

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

  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.

  24. Exemplo

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

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

  27. 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);

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

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

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

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

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

  33. Observe a diferença no “gia”!

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

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

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

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

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

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

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

More Related