[Css] A Propriedade "font"

[fsg 230]

Olá pessoal, agora eu irei postar uma série de tutoriais sobre CSS são 7 tutoriais, um por dia! Chega de papo e vamos para o assunto...

 

As fontes nos elementos HTML

As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.

 

As propriedades básicas para fontes e que abordaremos neste tutorial são as listadas abaixo:

 

• 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

 

Valores válidos para as propriedades da fonte

 

• color:

1. código hexadecimal: #FFFFFF
   
2. código rgb: rgb(255,235,0)
   
3. nome da cor: red, blue, green...etc
   

 

• font-family:

1. nome da família de fontes : define-se pelo nome da fonte,
   
2. p. ex:"verdana", "helvetica", "arial", etc.
   
3. nome da família genérica: define-se pelo nome genérico,
   
4. p. ex:"serif", "sans-serif", "cursive", etc.
   

 

• font-size:

1. xx-small
   
2. x-small
   
3. small
   
4. medium
   
5. large
   
6. x-large
   
7. xx-large
   
8. smaller
   
9. larger
   
10. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
    
11. %

 

• font-style:

1. normal: fonte normal na vertical
   
2. italic: fonte inclinada
   
3. oblique:fonte obliqua
   
4. font-variant:
   
5. normal: fonte normal
   
6. small-caps: transforma em maiúsculas de menor altura

 

• font-weight:

1. normal
   
2. bold
   
3. bolder
   
4. lighter
   
5. 100
   
6. 200
   
7. 300
   
8. 400
   
9. 500
   
10. 600
    
11. 700
    
12. 800
    
13. 900

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

 

Como estudar e entender os exemplos

 

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

 

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

 

Continua no link original...

 

Fonte:

Clique aqui

Espero que gostem :smile_positivo:

Editado Fevereiro 21, 2011 por FezZinN