Embed Size (px)
DESCRIPTION
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 ; - PowerPoint PPT Presentation
Citation preview
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
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
