CSS tipo de letra (fontes)

4,559 views

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
4,559
On SlideShare
0
From Embeds
0
Number of Embeds
565
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×