Texto do CSS (Texto)

As propriedades de texto do CSS permitem que você defina vários estilos de texto de forma eficiente e fácil, como cor, alinhamento, espaçamento, decoração, transformação, etc.

Formatar texto usando CSS

O CSS possui várias propriedades para definir estilos de texto. Essas propriedades permitem que você controle com precisãoCaractere,Espaço,Palavra,Parágrafoe outros aspectos visuais.

Você pode definir as seguintes propriedades de texto do elemento:

Cor do texto

A cor do texto é definida pelo CSS corDefinição de propriedade.Saiba mais sobre cor.

h1　{
　　　　cor: #ff0000;
}
p　{
　　　　cor: verde;
}

alinhamento de texto

Estetexto-alinhamentoA propriedade é usada para definir o alinhamento horizontal do texto.

Os valores possíveis para essa propriedade são: left, right, center, justify e inherit.

h1　{
　　　　texto-align: center;
}
p　{
　　　　texto-alinhamento:　justificar;
}

decoração de texto

Estetexto-decorationA propriedade é usada para definir ou remover a decoração do texto.

Os valores possíveis para esta propriedade são: none, underline, overline, line-through, blink e inherit. Você deve evitar usar este valor em texto sublinhado que não é um link, senão pode confundir o visitante.

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

Remover a sublinhatura padrão dos links

O text-A propriedade decoration é geralmente usada para remover a sublinhatura padrão dos hiperlinks. Remover completamente a sublinhatura pode confundir o visitante. A menos que você forneça outras pistas visuais para que ele se destaque, além de projetar o estilo do link.

Por exemplo, você pode usar pontos em vez de linhas retas na sublinhatura do link.

a {
　　　　texto-decoration: none;
　　　　borda-bottom:　1px dotted;
}

conversão de texto

O text-A propriedade transform é usada para definir o tamanho da letra do texto.

Pode ser usada para definir o conteúdo do texto do elemento em letras maiúsculas ou minúsculas, ou para capitalizar a primeira letra de cada palavra. Para os valores possíveis text-A propriedade transform tem: none, capitalize, uppercase, lowercase e inherit.

p.up {
　　　　texto-transform: uppercase;
}
p.cap {
　　　　texto-transform: lowercase;
}
p.low {
　　　　texto-transform: lowercase;
}

recuo de texto

O text-A propriedade recuo é usada para definir o recuo do primeiro texto do elemento. O text-Os valores possíveis para a propriedade recuo são:Porcentagem（%），Comprimentoou inherit.

O exemplo a seguir demonstra como recuar a primeira linha do parágrafo.

p　{
　　　　texto-recuo:　100px;
}

Espaçamento de palavras

palavra-espaçamento é usado para definir a propriedade de espaçamento entre palavras.

• O espaçamento de caracteres pode ser afetado pelo alinhamento do texto. Vejatexto-alinhamentoPropriedade.

• Manter espaços em branco, todos os caracteres de espaço são afetados pelo espaçamento de palavras. Veja o CSS branco-espaçamentoPropriedade.

Este word-Os valores possíveis da propriedade espaçamento são:comprimento（especificar o espaço entre palavras) normal e inherit.

p.um　{
　　　　palavra-espaçamento:　20px;
}
p.dois　{
　　　　palavra-espaçamento:　20px;
　　　　texto-alinhamento:　justificar;
}
p.três　{
　　　　palavra-espaçamento:　20px;
　　　　branco-espaçamento:　pre;
}

Espaçamento de caracteres

Esteletra-espaçamentoA propriedade é usada para definir o espaço adicional entre os caracteres do texto.

Os valores possíveis dessa propriedade são:comprimento（especificar o espaço padrão entre caracteres normal e o espaço adicional a ser inserido entre caracteres) e inherit.

h1　{
　　　　letra-espaçamento:　-3px;
}
p　{
　　　　letra-espaçamento:　10px;
}

Espaçamento de linha

Estelinha-alturaA propriedade define a altura de uma linha de texto (também conhecido comoLead)

Os valores possíveis dessa propriedade são:Porcentagem（%），Comprimento,Número，normal e inherit.

p　{
　　　　linha-altura:　1.2;
}

Quando o valor é numérico, calcula-se a altura da linha multiplicando o tamanho da fonte do elemento pelo número. Enquanto que os porcentuais são relativos ao tamanho da fonte do elemento.

Se linha-O valor da propriedade height é maior quefonte-tamanhoO valor do elemento, então essa diferença (chamado,“Meia liderança”），e distribuído uniformemente no topo e na parte inferior das caixas de linha de in.

p　{
　　　　fonte-tamanho:　14px;
　　　　linha-altura:　20px;
　　　　fundo-cor:　#f0e68c;
}

Para obter mais informações sobre o estilo do texto, consulteFonteeTexto relacionadoPropriedade.