[CSS] - Algumas propriedades (fonte)

**Steeph** · Sáb Abr 17, 2010 3:46 pm

Administradora

Sexo :

Posts : 13396

Reputação : 118

Idade : 32

Formação : Informática, Publicidade e Propaganda, Arquitetura e Urbanismo

Especialidade : UI/UX Design

Frase : the future needs a big kiss ;D

0

0

0

~ [CSS] - Algumas propriedades ~

~ Fontes
Aqui vamos aprender passo a passo algumas das propriedades de estilização das fontes em uma página pelo css.

Código:: color: = cor da fonte font-family: = tipo de fonte font-size: = tamanho de fonte font-style: = estilo de fonte font-variant: = fontes maiúsculas de menor altura font-weight: = quanto mais escura a fonte é (negrito) font: = maneira abreviada para todas as propriedades

-> Aqui segue os valores atribuídos a cada uma:
Color: Aceita: código hexadecimal(#FFFFFF), código rgb(255,235,0) ou nome da cor em inglês(red, blue, green, etc.).
font-family nome da família de fontes: define-se pelo nome da fonte ("verdana", "helvetica", "arial", etc.) ou nome da família genérica: define-se pelo nome genérico("serif", "sans-serif", "cursive", etc.)
Font-size: xx-small (xx=tamanho, small=pequeno), x-small (x=tamanho, small=pequeno), small (pequeno padrão), medium (médio padrão), large (grande padrão), x-large (x=tamanho, large=grande), xx-large (xx=tamanho, large=grande), smaller (pequeno padrão "normal"), larger (grande "normal"), length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...).
font-style: normal: fonte normal na vertical, italic: fonte inclinada, oblique:fonte obliqua.
font-variant: normal: fonte normal, small-caps: transforma em maiúsculas de menor altura.
font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Vamos analizar cada uma detalhadamente através de alguns exemplos básicos de uso normal.
Observe o codigo, mude no seu editor e teste, para um melhor aprendizado do css.

~ Color

Código:: <html> <head> <style type="text/css">  </style> </head> <body> <h1>Cabeçalho com letras vermelhas</h1> <h2>Cabeçalho com letras verdes</h2> <p>Parágrafo com letras azuis</p> </body> </html>

Vamos da primeira parte:

<style type="text/css">

Então, nessa parte está no começo, o estilo css declarado, depois a primeira parte H1 em verde, diz que H1 deverá ser verde. Então quando você escrever algum texto no html e dizer que quer ele em H1 ele será verde.
Já o H2 foi definido vermelho. Todo texto que você disser que quer H2 automaticamente ficará da cor vermelha.
p o p, foi definido como preto, então todo texto que for padronizado como P, será da cor preta.

esse seria o efeito em preview do codigo funcionando:

H1 com letras vermelhas

H2 com letras verdes

P com letras pretas

--- a editar com mais exemplos.

[CSS] - Algumas propriedades (fonte)

Sáb Abr 17, 2010 3:46 pm

Steeph

Últimos assuntos