quarta-feira, 9 de maio de 2012

PROPRIEDADES CSS - FONT

PROPRIEDADES CSS

As propriedades no Css são utilizadas para especificar formatações ao seus seletores, sejam eles seletores class, id ou tags. No Css existem propriedades que definem o estilo de fonte, textos, plano de fundo, margens internas, margens externas, imagens, formulários, links, etc.

Veremos cada uma delas começando pela Propriedade Font.

PROPRIEDADES FONT

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 nesta postagem são as listadas abaixo:

  • color:  Define a cor da fonte.
  • font-family: Define a família de fontes que você pode utilizar em sua página.
  • font-size: Define o tamanho da fonte.
  • font-style: Define o estilo da fonte.
  • font- variant: Fontes maiúsculas de menor altura.
  • font-weight: Define quanto mais escura a fonte é (negrito).
  • font: Usada para definir todas propriedades em uma única declaração.
Valores usados para cada propriedade:
  • color:
      • código hexadecimal: #FFFFFF
      • código rgb: rgb(255,235,0)
      • nome da cor: red, blue, green...etc
  • font-family:
      • nome da família de fontes : define-se pelo nome da fonte,  p. ex:"verdana", "helvetica", "arial", etc.
      • nome da família genérica: define-se pelo nome genérico,  p. ex:"serif", "sans-serif", "cursive", etc.
  • font-size:
      •  xx-small, x-small, small, médium, large, x-large, xx-large, smaller, larger,
      • 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

Exemplo:

<head>
<style type="text/css">
p {
font-family: arial, helvetica, serif;
color: #FF0000;
font-size: 14px;
font-style: italic;
}

p.seletor1 {
font-variant: small-caps;
font-weight: bold;
}
</style>
</head>
<body>

<p> Esse texto está estilizado com Css </p>
<br>
<p class=”seletor1”>
Esse texto está estilizado com Css usando o font-variant e font-weight.
</p>
</body>


Nenhum comentário:

Postar um comentário