laboratório de informática propriedades css: fontes 1º semestre 2009 > pucpr > bsi bruno c....
TRANSCRIPT
![Page 1: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/1.jpg)
Laboratório de InformáticaPropriedades CSS:Fontes
1º Semestre 2009 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/2.jpg)
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.
![Page 3: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/3.jpg)
311/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
![Page 4: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/4.jpg)
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/
411/04/23
![Page 5: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/5.jpg)
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/511/04/23
![Page 6: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/6.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
611/04/23
![Page 7: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/7.jpg)
711/04/23
Tags HTML referenciadas na aula (em Português –site Referenciando)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.
![Page 8: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/8.jpg)
811/04/23
Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;
![Page 9: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/9.jpg)
911/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.
![Page 10: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/10.jpg)
1011/04/23
Exemplos da aula
Fontes;Personalidade das fontes;Exemplo serifa;Exemplo serifa2;Propriedade font-family;Famílias genéricas;Propriedade font-size;
![Page 11: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/11.jpg)
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;
1111/04/23
![Page 12: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/12.jpg)
Exemplos da aula
Propriedade font-weight;Propriedade font-style;Propriedade font-variant;Representação resumida.
1211/04/23
![Page 13: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/13.jpg)
Relembrando as aulas passadas...
1311/04/23
![Page 14: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/14.jpg)
1411/04/23
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
![Page 15: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/15.jpg)
Assunto de hoje: propriedades e valores!
1511/04/23
![Page 16: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/16.jpg)
“Transformação” de ie6 em ie7
1611/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
![Page 17: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/17.jpg)
Há diversas famílias de fontes
1711/04/23
![Page 18: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/18.jpg)
Cada fonte possui uma personalidadediferente
1811/04/23
![Page 19: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/19.jpg)
Fontes possuem uma anatomia bem definida
1911/04/23
![Page 20: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/20.jpg)
2011/04/23
Desenvolvido por Paulo de Loyola
![Page 21: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/21.jpg)
Fontes podem ter serifas(sobre)
2111/04/23
![Page 22: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/22.jpg)
2211/04/23
Exemplo
![Page 23: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/23.jpg)
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.
2311/04/23
![Page 24: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/24.jpg)
2411/04/23
font-family
![Page 25: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/25.jpg)
Família genéricaColocar como último valor
2511/04/23
![Page 26: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/26.jpg)
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.
2611/04/23
![Page 27: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/27.jpg)
2711/04/23
Exemplo
![Page 28: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/28.jpg)
font-size:Valor absolutoDepende do navegador.
2811/04/23
![Page 29: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/29.jpg)
font-size: Valor relativoMaior (larger) ou menor (smaller);Relativo ao pai do elemento;
2911/04/23
![Page 30: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/30.jpg)
font-size:Comprimento absoluto
3011/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);
![Page 31: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/31.jpg)
3111/04/23
![Page 32: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/32.jpg)
3211/04/23
![Page 33: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/33.jpg)
Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho!
3311/04/23
![Page 34: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/34.jpg)
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.
3411/04/23
![Page 35: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/35.jpg)
3511/04/23
![Page 36: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/36.jpg)
font-size:Comprimento em %1em = 100%1.2em = 120%Porcentagem é em relação ao font-size
do elemento pai;
3611/04/23
![Page 37: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/37.jpg)
3711/04/23
![Page 38: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/38.jpg)
font-weight:espessura do texto (negrito)
3811/04/23
Na prática, os valores não estão implementados na maior parte dos navegadores.Ver: http://clagnut.com/blog/2228/
![Page 39: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/39.jpg)
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.
3911/04/23
![Page 40: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/40.jpg)
4011/04/23
![Page 41: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/41.jpg)
4111/04/23
![Page 42: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/42.jpg)
Observe a diferença no “gia”!
4211/04/23
![Page 43: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/43.jpg)
font-variant:texto em maiúsculas
O valor small-caps faz as letras minúsculas parecerem pequenas letras maiúsculas;
4311/04/23
![Page 44: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/44.jpg)
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.
4411/04/23
![Page 45: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/45.jpg)
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.
4511/04/23
![Page 46: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/46.jpg)
4611/04/23
![Page 47: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/47.jpg)
4711/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
![Page 48: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/48.jpg)
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/
4811/04/23
![Page 49: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/49.jpg)
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/
4911/04/23
![Page 50: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/50.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um
capítulo.
5011/04/23
![Page 51: Laboratório de Informática Propriedades CSS: Fontes 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.net/reader035/viewer/2022062404/552fc0fe497959413d8bbac1/html5/thumbnails/51.jpg)
5111/04/23
Próximas aulas de CSS
Propriedades CSS: –Textos, imagens e fundos.