Your SlideShare is downloading. ×
0
Formatação de tipode letra (fontes)      Agrupamento de Escolas da Batalha      Miguela Fernandes      Janeiro 2012
Considerações iniciaisPropriedades básicas para os tipos de letra (fonte):Color: cor da fonte;font-family: tipo de fonte;f...
COLOREm código hexadecimal: #FFFFFFEm código rgb: rgb(255,235,0)Com o nome da cor: yellow, red, blue, entre  outras.Exempl...
FONT-FAMILYnome da família das fontes : é usar o nome dafonte. Por exemplo:“verdana”, “helvetica”, “arial”,…..Exemplo:<sty...
FONT-SIZE (1)xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength: medida reconhecida pelas CSS (px, pt, em, ...
FONT-SIZE (2)Exemplo:<style type="text/css">h1 {font-size: 15px;}h2 {font-size: smaller;}p {font-size: 120%;}</style>     ...
FONT-STYLEnormal: fonte normal na verticalitalic: fonte inclinadaoblique: fonte obliqua (mais inclinada)Exemplo:h1 {font-s...
FONT-VARIANTnormal: fonte normalsmall-caps: maiúsculas pequenasExemplo:<style type="text/css">h1 {font-variant: normal;}h2...
FONT-WEIGHTnormalboldbolderlighter   Exemplo:100200          <style type="text/css">300       p {font-weight: bold;}400   ...
Sintaxe FONTfont: [style] [variant] [weight] [size] [/line-height] [family]Exemplo:<style type="text/css">p { font: italic...
Webgrafia e Bibliografiahttp://www.ufpa.br/dicas/htm/htm-fra.htmhttp://www.sevenseek.com/tutorials/learning-css-  importan...
Upcoming SlideShare
Loading in...5
×

CSS tipo de letra (fontes)

3,626

Published on

Curso de Profissional de TGPSI: módulo 4

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,626
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CSS tipo de letra (fontes)"

  1. 1. Formatação de tipode letra (fontes) Agrupamento de Escolas da Batalha Miguela Fernandes Janeiro 2012
  2. 2. Considerações iniciaisPropriedades básicas para os tipos de letra (fonte):Color: cor da fonte;font-family: tipo de fonte;font-size: tamanho de fonte;font-style: estilo de fonte;font-variant: fontes maiúsculas pequenas;font-weight: tornar mais escura a fonte (negrito);Font: abreviadar todas as propriedades. MF. 2
  3. 3. COLOREm código hexadecimal: #FFFFFFEm código rgb: rgb(255,235,0)Com o nome da cor: yellow, red, blue, entre outras.Exemplo:h1 {color: #FFFFFF;}h2 {color: rgb(124,234,255);}p {color: #000000;} MF. 3
  4. 4. FONT-FAMILYnome da família das fontes : é usar o nome dafonte. Por exemplo:“verdana”, “helvetica”, “arial”,…..Exemplo:<style type="text/css">h2 {font-family: arial, helvetica, serif;}p {font-family: sans-serif;}</style> MF. 4
  5. 5. FONT-SIZE (1)xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength: medida reconhecida pelas CSS (px, pt, em, cm, ...)% MF. 5
  6. 6. FONT-SIZE (2)Exemplo:<style type="text/css">h1 {font-size: 15px;}h2 {font-size: smaller;}p {font-size: 120%;}</style> MF. 6
  7. 7. FONT-STYLEnormal: fonte normal na verticalitalic: fonte inclinadaoblique: fonte obliqua (mais inclinada)Exemplo:h1 {font-style: italic;}h2 {font-style: normal;}p {font-style: oblique;} MF. 7
  8. 8. FONT-VARIANTnormal: fonte normalsmall-caps: maiúsculas pequenasExemplo:<style type="text/css">h1 {font-variant: normal;}h2 {font-variant: small-caps;}</style> MF. 8
  9. 9. FONT-WEIGHTnormalboldbolderlighter Exemplo:100200 <style type="text/css">300 p {font-weight: bold;}400 </style>500600700800900 MF. 9
  10. 10. Sintaxe FONTfont: [style] [variant] [weight] [size] [/line-height] [family]Exemplo:<style type="text/css">p { font: italic small-caps bold14px "Comic Sans MS", sans-serif; }</style> MF. 10
  11. 11. Webgrafia e Bibliografiahttp://www.ufpa.br/dicas/htm/htm-fra.htmhttp://www.sevenseek.com/tutorials/learning-css- important-css-concepts/http://webstyleguide.com/wsg3/5-site-structure/3- site-file-structure.htmlhttp://www.tizag.com/cssT/inline.phpTeagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press. MF. 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×