laboratório de informática propriedades css: fontes
DESCRIPTION
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 ; - PowerPoint PPT PresentationTRANSCRIPT
Laboratório de InformáticaPropriedades CSS:Fontes
1º Semestre 2009 > PUCPR > BSI
Bruno C. de PaulaBruno 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.
321/04/23
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-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/fon
ts-for-web-design-a-primer/
421/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/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/521/04/23
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
621/04/23
721/04/23
Tags HTML referenciadas na aula (em Português –site Referenciando)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.
821/04/23
Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;
921/04/23
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.
1021/04/23
Exemplos da aula
Fontes;Personalidade das fontes;Exemplo serifa;Exemplo serifa2;Propriedade font-family;Famílias genéricas;Propriedade font-size;
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;
1121/04/23
Exemplos da aula
Propriedade font-weight;Propriedade font-style;Propriedade font-variant;Representação resumida.
1221/04/23
Relembrando as aulas passadas...
1321/04/23
1421/04/23
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
Assunto de hoje: propriedades e valores!
1521/04/23
“Transformação” de ie6 em ie7
1621/04/23
<!--[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
Há diversas famílias de fontes
1721/04/23
Cada fonte possui uma personalidadediferente
1821/04/23
Fontes possuem uma anatomia bem definida
1921/04/23
2021/04/23
Desenvolvido por Paulo de Loyola
Fontes podem ter serifas(sobre)
2121/04/23
2221/04/23
Exemplo
Propriedades CSS tipográficas de fontefont-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.
2321/04/23
2421/04/23
font-family
Família genéricaColocar como último valor
2521/04/23
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.
2621/04/23
2721/04/23
Exemplo
font-size:Valor absolutoDepende do navegador.
2821/04/23
font-size: Valor relativoMaior (larger) ou menor (smaller);Relativo ao pai do elemento;
2921/04/23
font-size:Comprimento absoluto
3021/04/23
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);
3121/04/23
3221/04/23
Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho!
3321/04/23
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.
3421/04/23
3521/04/23
font-size:Comprimento em %1em = 100%1.2em = 120%Porcentagem é em relação ao font-size
do elemento pai;
3621/04/23
3721/04/23
font-weight:espessura do texto (negrito)
3821/04/23
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 fonteItá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.
3921/04/23
4021/04/23
4121/04/23
Observe a diferença no “gia”!
4221/04/23
font-variant:texto em maiúsculas
O valor small-caps faz as letras minúsculas parecerem pequenas letras maiúsculas;
4321/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.
4421/04/23
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.
4521/04/23
4621/04/23
4721/04/23
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-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/
4821/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/
4921/04/23
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um
capítulo.
5021/04/23
5121/04/23
Próximas aulas de CSS
Propriedades CSS: –Textos, imagens e fundos.