CSS tipo de letra (fontes)

Curso de Profissional de TGPSI: módulo 4

1. Agrupamento de Escolas da Batalha Miguela Fernandes Janeiro 2012 CSS CSS Formatação de tipo de letra (fontes)

2. Considerações iniciais Propriedades 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. COLOR Em código hexadecimal: #FFFFFF Em 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. FONT-FAMILY nome da família das fontes : é usar o nome da fonte. 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. FONT-SIZE (1) xx-small x-small small medium large x-large xx-large smaller larger length: medida reconhecida pelas CSS ( px , pt, em , cm, ...) % MF. 5

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. FONT-STYLE normal : fonte normal na vertical italic : fonte inclinada oblique : fonte obliqua (mais inclinada) Exemplo: h1 {font-style: italic;} h2 {font-style: normal;} p {font-style: oblique;} MF. 7

8. FONT-VARIANT normal : fonte normal small-caps : maiúsculas pequenas Exemplo: <style type="text/ css "> h1 {font-variant: normal;} h2 {font-variant: small-caps;} </style> MF. 8

9. FONT-WEIGHT normal bold bolder lighter 100 200 300 400 500 600 700 800 900 MF. 9 Exemplo : <style type="text/ css "> p {font-weight: bold;} </style>

10. Sintaxe FONT font: [style] [variant] [weight] [ size ] [/line-height] [ family ] Exemplo: <style type="text/ css "> p { font: italic small-caps bold 14px "Comic Sans MS", sans-serif; } </style> MF. 10

11. Webgrafia e Bibliografia http://www.ufpa.br/dicas/htm/htm-fra.htm http://www.sevenseek.com/tutorials/learning-css-important-css-concepts/ http://webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html http://www.tizag.com/cssT/inline.php Teagu , J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press. MF. 11