laboratório de informática css seletores fontes em css 1º semestre 2010 > pucpr > bsi bruno...
TRANSCRIPT
![Page 1: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/1.jpg)
Laboratório de InformáticaCSS SeletoresFontes em CSS
1º Semestre 2010 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/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 CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/3.jpg)
3
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 CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/4.jpg)
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
![Page 5: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/5.jpg)
Material referente ao assunto da aula
Portal sobre tipografia da Microsoft:http://www.microsoft.com/typography/
default.mspxDesign 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/
5
![Page 6: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/6.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um
capítulo.
6
![Page 7: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/7.jpg)
7
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 CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/8.jpg)
8
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 CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/9.jpg)
9
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 CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/10.jpg)
Relembrando as aulas passadas...
10
![Page 11: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/11.jpg)
11
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
![Page 12: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/12.jpg)
Assunto de hoje: propriedades e valores!
12
![Page 13: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/13.jpg)
“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]-->
![Page 14: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/14.jpg)
Há diversas famílias de fontes
14
![Page 15: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/15.jpg)
Cada fonte possui uma personalidadediferente
15
![Page 16: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/16.jpg)
Fontes possuem uma anatomia bem definida
16
![Page 17: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/17.jpg)
17
Desenvolvido por Paulo de Loyola
![Page 19: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/19.jpg)
19
Exemplo
![Page 20: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/20.jpg)
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
![Page 21: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/21.jpg)
21
font-family
![Page 22: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/22.jpg)
Família genéricaColocar como último valor
22
![Page 23: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/23.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.
23
![Page 24: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/24.jpg)
24
Exemplo
![Page 25: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/25.jpg)
font-size:Valor absolutoDepende do navegador.
25
![Page 26: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/26.jpg)
font-size: Valor relativoMaior (larger) ou menor (smaller);Relativo ao pai do elemento;
26
![Page 27: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/27.jpg)
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);
![Page 28: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/28.jpg)
28
![Page 29: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/29.jpg)
29
![Page 30: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/30.jpg)
Se o usuário alterar o tamanho da fonte, fontes em comprimento absoluto ficam do mesmo tamanho!
30
![Page 31: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/31.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.
31
![Page 32: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/32.jpg)
32
![Page 33: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/33.jpg)
font-size:Comprimento em %1em = 100%1.2em = 120%Porcentagem é em relação ao font-size
do elemento pai;
33
![Page 34: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/34.jpg)
34
![Page 35: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/35.jpg)
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/
![Page 36: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/36.jpg)
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
![Page 37: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/37.jpg)
37
![Page 38: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/38.jpg)
38
11/04/23
![Page 39: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/39.jpg)
Observe a diferença no “gia”!39
![Page 40: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/40.jpg)
font-variant:texto em maiúsculasO valor small-caps faz as letras
minúsculas parecerem pequenas letras maiúsculas;
40
11/04/23
![Page 41: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/41.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.
41
![Page 42: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/42.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.
42
![Page 43: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/43.jpg)
43
![Page 44: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/44.jpg)
44
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 45: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/45.jpg)
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.aspFontes para web designers:
http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/
45
11/04/23
![Page 46: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/46.jpg)
Material referente ao assunto da aula
Portal sobre tipografia da Microsoft:http://www.microsoft.com/
typography/default.mspxDesign 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
11/04/23
![Page 47: Laboratório de Informática CSS Seletores Fontes em CSS 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022062512/552fc0fe497959413d8bbab5/html5/thumbnails/47.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um
capítulo.
47
11/04/23