CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Fonts

Este capítulo ensina como definir as fontes de um conteúdo, disponível em um elemento HTML. Você pode definir as seguintes propriedades de fonte de um elemento –

A propriedade font-family é usada para alterar a face de uma fonte.
A propriedade font-style é usada para tornar uma fonte itálica ou oblíqua.
A propriedade font-variant é usada para criar um efeito de versalete.
A propriedade font-weight é usada para aumentar ou diminuir o quão em negrito ou claro uma fonte aparece.
A propriedade font-size é usada para aumentar ou diminuir o tamanho de uma fonte.
A propriedade da fonte é usada como um atalho para especificar várias outras propriedades da fonte.

Definir a família da fonte

A seguir está o exemplo, que demonstra como definir a família da fonte de um elemento. O valor possível pode ser qualquer nome de família de fonte:

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

Defina o estilo da fonte

A seguir está o exemplo, que demonstra como definir o estilo da fonte de um elemento. Os valores possíveis são normal, itálico e oblíquo.

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

Definir a variante da fonte

O exemplo a seguir demonstra como definir a variante da fonte de um elemento. Os valores possíveis são normais e versaletes.

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

Defina o peso da fonte

O exemplo a seguir demonstra como definir a espessura da fonte de um elemento. A propriedade font-weight fornece a funcionalidade para especificar o quão negrito é uma fonte. Os valores possíveis podem ser normal, negrito, negrito, mais claro, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

Defina o tamanho da fonte

O exemplo a seguir demonstra como definir o tamanho da fonte de um elemento. A propriedade font-size é usada para controlar o tamanho das fontes. Os valores possíveis podem ser xx-pequeno, x-pequeno, pequeno, médio, grande, x-grande, xx-grande, menor, maior, tamanho em pixels ou em%.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

Definir o ajuste do tamanho da fonte

O exemplo a seguir demonstra como definir o ajuste do tamanho da fonte de um elemento. Esta propriedade permite ajustar a altura x para tornar as fontes mais legíveis. O valor possível pode ser qualquer número.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

Definir o alongamento da fonte

O exemplo a seguir demonstra como definir a extensão da fonte de um elemento. Esta propriedade depende do computador do usuário para ter uma versão expandida ou condensada da fonte que está sendo usada.

Os valores possíveis podem ser normal, mais amplo, mais estreito, ultracondensado, extracondensado, condensado, semi-condensado, semi-expandido, expandido, extra-expandido, ultra-expandido.

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

Propriedade abreviada

Você pode usar a propriedade font para definir todas as propriedades da fonte de uma vez. Por exemplo:

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

Anterior CSS – Backgrounds

Próximo CSS – Text

CSS - Fundamentos Básicos