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

Laboratório de InformáticaCSS SeletoresFontes 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 aulaRecomendaçã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

Material referente ao assunto da aula Tutoriais sobre fontes em CSS:

http://www.maujor.com/tutorial/fonttut.phphttp://www.maujor.com/w3ctuto/fonts.htmlhttp://pt-br.html.net/tutorials/css/lesson4.as

p Fontes para web designers:

http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/

4

Material referente ao assunto da aulaPortal 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/des

ign-para-cssers-tipografia-parte-i/http://www.luli.com.br/2008/04/01/des

ign-para-cssers-tipografia-parte-ii/http://www.luli.com.br/2008/04/07/des

ign-para-cssers-tipografia-parte-iii/

5

Material referente ao assunto da aula

CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um

capítulo.

6

7

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

8Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

9Propriedades 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.

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 ie713

<!--[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]-->

Há diversas famílias de fontes

14

Cada fonte possui uma personalidadediferente

15

Fontes possuem uma anatomia bem definida

16

17

Desenvolvido por Paulo de Loyola

Fontes podem ter serifas(sobre)

18

19

Exemplo

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.

20

21

font-family

Família genéricaColocar como último valor

22

font-size: Tipos de valorValor 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 absolutoDepende do navegador.

25

font-size: Valor relativoMaior (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 relativoem: 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

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: http://clagnut.com/blog/2228/

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

24/04/23

Observe a diferença no “gia”!39

font-variant:texto em maiúsculasO valor small-caps faz as letras

minúsculas parecerem pequenas letras maiúsculas;

40

24/04/23

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 sistemacaption: 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 aulaRecomendação W3C do CSS 2.1 (em

Inglês):http://www.w3.org/TR/CSS21/

selector.html#pattern-matchingCapítulo do Livro CSS – Guia de Bolso:

http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf

Material referente ao assunto da aulaTutoriais 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/

45

24/04/23

Material referente ao assunto da aulaPortal 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/

46

24/04/23

Material referente ao assunto da aula

CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um

capítulo.

47

24/04/23