CSS: Formatação de Textos

Olá pessoal, hoje vamos para mais um tutorial CSS. Hoje veremos a formatação de texto. Vamos ser breves e já começar com o primeiro comando que é:

1. Cor do Texto
A cor do texto pode ser setado com o comando color. Assim como o background-color de ontem, o color aceita cores em três formatos: 

• Em código hexadecimal:
  color:#0000FF;
• Em código  RGB:
  color:rgb(0,0,255);
• Pelo nome da cor:
  color:green;

Vamos ver montar o nosso exemplo: 

p{
 color:green;
}

2. Alinhamento do Texto
Ajusta o alinhamento do texto, podendo ajustar centralizado, alinhado à esquerda, alinhado à direita ou justificado. Para isso usamos o comando text-align com os possíveis valores:

• center: centralizado;
• left: à esquerda;
• right: à direita;
• justify: justificado;

No exemplo:


p{
 color:green;
 text-align: justify;
} 

3. Decoração de Texto (Sublinhado, sobrelinhado, tachado, piscando)
Leia-se como decoração de texto, os textos sublinhados e riscados. Para alterar essa configuração usamos o comando text-decoration, que pode assumir os seguintes valores:

• none: o padrão. Nenhuma decoração é colocada;
• underline: o texto fica sublinhado;
• overline: o texto fica sobrelinhado; 
• line-through: o texto fica com uma linha por cima do texto;
• blink: o texto fica piscando;

Vamos por no exemplo:

p{
 color:green;
 text-align: justify;
 text-decoration: overline;
}
4. Transformação de Texto
Esse comando serve para deixar todo o texto em caixa alta, caixa baixa ou deixar todas as primeiras letras de cada palavra em caixa alta. O comando para isso é text-transform e assumi os seguintes valores:

• none: o padrão. Nenhuma transformação é colocada;
• capitalize: transforma a primeira letra de cada palavra em caixa alta;
• uppercase: transforma todas as letras em caixa alta;
• lowercase: transfora todas as letras em caixa baixa.

Exemplo:

p{
 color:green;
 text-align: justify;
 text-decoration: overline; text-transform: lowercase;
}

5. Indentação de texto
Define o espaçamento da primeira linha de um bloco de texto. Utiliza-se o comando text-indent usando um valor e uma unidade de medida. 

Exemplo:

p{
 color:green;
 text-align: justify;
 text-decoration: overline; 
  text-transform: lowercase;
 text-indent: 3em
}

6. Conclusão
Esses são os principais atributos que você pode estar utilizando para manipular a aparência dos textos. Existes muito mais, mas pouco utilizado, por exemplo, configuração dos espaços em brancos entre outras. Então, deixo por aqui o tutorial e até a próxima.