Começando com CSS – Parte 3

Postado por Abraão Levi Oliveira Figueredo em 16 de janeiro de 2010

Agora vamos ver as propriedades e que estão relacionadas aos textos e fontes.

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform

font-family

A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

No código acima os cabeçalhos <h1> serão renderizados com fonte “Arial”. Se o usuário não tiver a font Arial instalada, será usada a fonte “Verdana”. Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.

A fonte “Times New Roman” foi escrita com aspas, pois ela contém espaços entre os nomes.

font-style

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.

h2 {
        font-family: "Times New Roman", serif;
        font-style: italic;
}

font-variant

A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos:

Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

font-weight

A propriedade font-weight define quão negrito ou “pesada” deve ser a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100 a 900 para definir o peso da fonte, mas não é comum ser usado desta forma.

span {
        font-family: arial, verdana, sans-serif;
        font-weight: bold;
}

font-size

O tamanho da fonte é definido pela propriedade font-size.

Existem muitas unidades (as principais são pixels e percentagens) que podem ser usadas para definir o tamanho da fonte.

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Existe uma diferença fundamental entre as quatro unidades adotadas no exemplo acima, poderemos tratar sobre esse assunto em outro artigo.

font

Assim como o background tem sua abreviação a propiedade font também possui.

Veja a seguir quatro linhas de código usadas para definir propriedades de fonte para um parágrafo <p>:

p {
  font-style: italic;
  font-weight: bold;
  font-size: 30px;
  font-family: arial, sans-serif;
}

Usar a abreviação simplifica o código como mostrado abaixo:

p {
        font: italic bold 30px arial, sans-serif;
}

A ordem dos valores para

font é a mostrada a seguir :

font-style | font-variant | font-weight | font-size | font-family

text-indent

A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos marcados com <p>:

p {
  text-indent: 30px;
}

text-align

A propriedade text-align corresponde ao atributo align do HTML. Textos podem ser alinhados à esquerda (left), à direita (right), centrados (center) ou justificados (justify).

No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:

th {
  text-align: right;
}
 
td {
  text-align: center;
}
 
p {
  text-align: justify;
}

text-decoration

A propriedade text-decoration possibilita adicionar “efeitos” ou “decoração” em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.

h1 {
  text-decoration: underline;
}
 
h2 {
  text-decoration: overline;
}
 
h3 {
 text-decoration: line-through;
}

letter-spacing

O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado.

h1 {
  letter-spacing: 6px;
}
 
p {
  letter-spacing: 3px;
}

Os valores podem ser negativos, mas cuidado ao usar pois pode dificultar a leitura.

text-transform

A propriedade text-transform controla a capitalização do texto. Você pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no código HTML.

Como exemplo tomamos a palavra “cabeçalho” que pode ser apresentada ao usuário como “CABEÇALHO” ou “Cabeçalho”. São quatro os valores possíveis para text-transform:

Capitalize;

Capitaliza a primeira letra de cada palavra. Por exemplo: “falando ti” transforma em “Falando Ti”.

Uppercase;

Converte todas as letras para maiúscula. Por exemplo: “falando ti” transforma em “FALANDO TI”.

Lowercase;

Converte todas as letras para minúscula. Por exemplo: “FALANDO TI” transforma em “falando ti”.

None;

Sem transformações – o texto é apresentado como foi escrito no código HTML.

Então é isso! Até a Próxima!