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

CSS tipo de letra (fontes)

Embed Size (px)

DESCRIPTION

Curso de Profissional de TGPSI: módulo 4

Citation preview

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