SdevLab – Tutorial | CSS Font

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS Font

Dando continuidade nos tutoriais css, apartir de agora abordaremos as propriedades dos elementos. Para começar vamos trabalhar com a tag font.

Na tabela abaixo segue a lista de propriedades e as opções de “configuração” de cada uma delas. Cada propriedade pode ser utilizada separadamente ou então todas podem ser agrupadas, como será mostrado neste tutorial.

Propriedade Descrição Opções
color cor da fonte
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green…etc
font-family tipo de fonte
  1. nome da família de fontes : define-se pelo nome da fonte,
    p. ex:”verdana”, “helvetica”, “arial”, etc.
  2. nome da família genérica: define-se pelo nome genérico,
    p. ex:”serif”, “sans-serif”, “cursive”, etc.
font-size tamanho de fonte
  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 estilo de fonte
  1. normal: fonte normal na vertical
  2. italic: fonte inclinada
  3. oblique:fonte obliqua
font-variant fontes maiúsculas de menor altura
  1. normal: fonte normal
  2. small-caps: transforma em maiúsculas de menor altura
font-weight quanto mais escura a fonte é (negrito)
  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

O exemplo abaixo mostra como mudar a fonte de um parágrafo, a mesma sintaxe utilizada para escrever o estilo do parágrafo pode ser usada para qualquer outra propriedade da tabela acima.

<html>
<head>
<style type="text/css">
<!--
p {
font: italic small-caps bold 14px
 "Comic Sans MS", sans-serif;
}
-->
</style>
<title>Teste 4</title>
</head>
<body>
<p>Exemplo blablabla.</p>
</body>
</html>

Para utilizar todas as propriedades de font dentro de uma mesma regra. Segue utilize a sintaxe geral:

font: [style] [variant] [weight] [size] [/line-height] [family] | caption |
icon | menu | message-box | small-caption | status-bar | inherit

Somente as propriedades size e family são obrigatórias quando utilizamos somente font, as demais são facultativas.

Até a próxima!

Fonte de pesquisa: maujor.com

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

2 comentários sobre “SdevLab – Tutorial | CSS Font

  1. Pingback: Tutorial CSS básico – Text « Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s