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:
    • 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 medium 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

    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. Fonte: www.maujor.com