CSS tipo de letra (fontes)

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

description

Curso de Profissional de TGPSI: módulo 4

Transcript of CSS tipo de letra (fontes)

Page 1: CSS tipo de letra (fontes)

Agrupamento de Escolas da BatalhaMiguela FernandesJaneiro 2012

CSSCSSFormatação de tipo de letra (fontes)

Page 2: CSS tipo de letra (fontes)

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

Page 3: CSS tipo de letra (fontes)

COLOR

Em 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

Page 4: CSS tipo de letra (fontes)

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

Page 5: CSS tipo de letra (fontes)

FONT-SIZE (1)xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength: medida reconhecida pelas CSS (px, pt, em, cm, ...) %

MF. 5

Page 6: CSS tipo de letra (fontes)

FONT-SIZE (2)

Exemplo:<style type="text/css">h1 {font-size: 15px;} h2 {font-size: smaller;} p {font-size: 120%;} </style>

MF. 6

Page 7: CSS tipo de letra (fontes)

FONT-STYLE

normal: 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

Page 8: CSS tipo de letra (fontes)

FONT-VARIANT

normal: fonte normalsmall-caps: maiúsculas pequenasExemplo:<style type="text/css">h1 {font-variant: normal;} h2 {font-variant: small-caps;} </style>

MF. 8

Page 9: CSS tipo de letra (fontes)

FONT-WEIGHTnormalboldbolderlighter100200300400500600700800900

MF. 9

Exemplo:<style type="text/css"> p {font-weight: bold;} </style>

Page 10: CSS tipo de letra (fontes)

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

Page 11: CSS tipo de letra (fontes)

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