CSS tipo de letra (fontes)
-
Upload
miguela-fernandes -
Category
Documents
-
view
3.347 -
download
0
description
Transcript of CSS tipo de letra (fontes)
Agrupamento de Escolas da BatalhaMiguela FernandesJaneiro 2012
CSSCSSFormatação de 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
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
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
FONT-SIZE (1)xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength: medida reconhecida pelas CSS (px, pt, em, cm, ...) %
MF. 5
FONT-SIZE (2)
Exemplo:<style type="text/css">h1 {font-size: 15px;} h2 {font-size: smaller;} p {font-size: 120%;} </style>
MF. 6
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
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
FONT-WEIGHTnormalboldbolderlighter100200300400500600700800900
MF. 9
Exemplo:<style type="text/css"> p {font-weight: bold;} </style>
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
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