formatação de texto
Este texto é denominado com algumas das propriedades de formatação de texto. O título usa o text-align, text-transform e color propriedades. O parágrafo é recuada, alinhado e o espaço entre caracteres é especificado. O sublinhado é removido desta cor "Tente você mesmo" link.
Cor do texto
A color propriedade é usada para definir a cor do texto.
Com CSS, uma cor é mais frequentemente especificado por:
- um nome de cor - como "red"
- um valor HEX - como "#ff0000"
- um valor RGB - como "rgb(255,0,0)"
Olhe para valores de cor CSS para uma completa lista de possíveis valores de cor.
A cor do texto padrão para uma página é definida no seletor corpo.
 | Nota: CSS compatível Para W3C: Se você definir a color da propriedade, você também deve definir o background-color propriedade. |
|---|
Alinhamento de texto
O text-align propriedade é usada para definir o alinhamento horizontal de um texto.
Um texto pode ser esquerda ou alinhado à direita, centralizado, ou justificado.
O exemplo a seguir mostra alinhada ao centro, esquerda e direita texto alinhado (alinhamento à esquerda é padrão, se a direção do texto é da esquerda para a direita, e alinhamento à direita é padrão, se a direção do texto é da direita para a esquerda):
Exemplo
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
} Tente você mesmo " Quando o text-align propriedade é definida como "justify" , cada linha é esticada de modo que cada linha tem a mesma largura, e as margens esquerda e direita são retas (como em revistas e jornais):
Decoração de texto
O text-decoration propriedade é usada para definir ou remover decorações de texto.
O valor text-decoration: none; é muitas vezes usado para remover sublinhados de links:
Os outros text-decoration valores são usados para decorar o texto:
Exemplo
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Tente você mesmo " | Nota: Não é recomendado para sublinhar texto que não é um link, pois isso muitas vezes confunde o leitor. |
|---|
Transformação de texto
O text-transform propriedade é usada para especificar letras maiúsculas e minúsculas em um texto.
Ele pode ser usado para transformar tudo em letras maiúsculas ou minúsculas, ou capitalizar a primeira letra de cada palavra:
Exemplo
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Tente você mesmo " recuo de texto
O text-indent propriedade é usada para especificar o recuo da primeira linha de um texto:
Espaçamento carta
A letter-spacing propriedade é usada para especificar o espaço entre os caracteres de um texto.
O exemplo que se segue demonstra como para aumentar ou diminuir o espaço entre os caracteres:
Altura da linha
O line-height propriedade é usada para especificar o espaço entre linhas:
Direcção do texto
A direction propriedade é usada para alterar a direção do texto de um elemento:
palavra Espaçamento
A word-spacing propriedade é usada para especificar o espaço entre as palavras de um texto.
O exemplo que se segue demonstra como para aumentar ou diminuir o espaço entre as palavras:
mais Exemplos
Desativar a quebra de texto dentro de um elemento
Este exemplo demonstra como desativar a quebra de texto dentro de um elemento.
Alinhamento vertical de uma imagem
Este exemplo demonstra como para definir o alinhamento vertical de uma imagem de um texto.
Adicionar sombra ao texto
Este exemplo demonstra como adicionar sombra ao texto.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Todas as propriedades CSS texto
| Propriedade | Descrição |
|---|---|
| color | Define a cor do texto |
| direction | Especifica a direção do texto / escrita direção |
| letter-spacing | Aumenta ou diminui o espaço entre caracteres em um texto |
| line-height | Define a altura da linha |
| text-align | Especifica o alinhamento horizontal do texto |
| text-decoration | Especifica a decoração adicionado ao texto |
| text-indent | Especifica o recuo da primeira linha em um texto-block |
| text-shadow | Especifica o efeito de sombra adicionado ao texto |
| text-transform | Controla a capitalização do texto |
| unicode-bidi | Usado em conjunto com a direção propriedade para definir ou retornar se o texto deve ser substituído para suportar vários idiomas no mesmo documento |
| vertical-align | Define o alinhamento vertical de um elemento |
| white-space | Especifica como white-space dentro de um elemento é tratado |
| word-spacing | Aumenta ou diminui o espaço entre as palavras de texto |