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

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): #pattern-matching #pattern-matching Capítulo do Livro CSS – Guia de Bolso: stra/00_cssbolso.pdf stra/00_cssbolso.pdf

Material referente ao assunto da aula Tutoriais sobre fontes em CSS: Fontes para web designers: design-a-primer/ design-a-primer/ 4

Material referente ao assunto da aula Portal sobre tipografia da Microsoft: ult.mspx ult.mspx Design para CSSers (I, II e III): para-cssers-tipografia-parte-i/ para-cssers-tipografia-parte-i/ para-cssers-tipografia-parte-ii/ para-cssers-tipografia-parte-ii/ para-cssers-tipografia-parte-iii/ para-cssers-tipografia-parte-iii/ 5

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 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

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

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

Relembrando as aulas passadas... 10

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

Assunto de hoje: propriedades e valores! 12

Transformação de ie6 em ie7 13 <script src=" type="text/javascript"> Transformação de ie6-7 em ie8

Há diversas famílias de fontes 14

Cada fonte possui uma personalidade diferente 15

Fontes possuem uma anatomia bem definida 16

17 Desenvolvido por Paulo de LoyolaPaulo de Loyola

Fontes podem ter serifas (sobre)sobre) 18

19 Exemplo

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 font-family

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

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 Exemplo

font-size: Valor absoluto Depende do navegador. 25

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

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

29

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

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, 320x

32

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

34

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

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

38 13/1/2014

Observe a diferença no gia! 39

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

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

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

44 Material referente ao assunto da aula Recomendação W3C do CSS 2.1 (em Inglês): #pattern-matching #pattern-matching Capítulo do Livro CSS – Guia de Bolso: stra/00_cssbolso.pdf stra/00_cssbolso.pdf

Material referente ao assunto da aula Tutoriais sobre fontes em CSS: p p l l br.html.net/tutorials/css/lesson4.asp br.html.net/tutorials/css/lesson4.asp Fontes para web designers: for-web-design-a-primer/ for-web-design-a-primer/ 45 13/1/2014

Material referente ao assunto da aula Portal sobre tipografia da Microsoft: ult.mspx ult.mspx Design para CSSers (I, II e III): para-cssers-tipografia-parte-i/ para-cssers-tipografia-parte-i/ para-cssers-tipografia-parte-ii/ para-cssers-tipografia-parte-ii/ para-cssers-tipografia-parte-iii/ para-cssers-tipografia-parte-iii/ 46 13/1/2014

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