Propriedades CSS para estilizar textos

Introdução

Neste tutorial estudaremos as propriedades CSS destinadas exclusivamente à estilização de textos.

Textos, também conhecidos na terminologia técnica da HTML como "conteúdos textuais" são inseridos em uma página com uso de elementos de marcação, tais como, H1, P, DIV, SPAN, BODY, etc. Textos "fluem" da esquerda para a direita (na escrita ocidental) dentro do box CSS criado pelo elemento no qual foram inseridos até atingir o comprimento total do box quando passam para a linha seguinte e assim sucessivamente criando linhas distribuidas na vertical. Exatamente como acontece com este texto que você está lendo, com os textos que lemos em jornais, revistas e mídia impressa em geral.

Textos são constituidos por palavras e acentuação e palavras são formadas por letras ou fontes, e aqui fazemos esta observação para esclarecer que este tutorial mostra as propriedades para estilização de textos. A estilização de fontes é tratada no tutorial Propriedades CSS para estilizar fontes.

Índice das propriedades

As propriedades CSS para estilizar, exclusivamente, textos são listadas neste índice. Para acesso rápido a cada uma das propriedades use o índice para navegar.

• text-indent
• text-align
• text-align-last (à titulo informativo)
• text-transform
• text-decoration
• text-underline-position (à titulo informativo)
• text-emphasis (à titulo informativo)
• text-emphasis-position (à titulo informativo)
• text-overflow
• text-orientation (à titulo informativo)
• text-shadow (link abre tutorial neste site)
• line-height (link abre tutorial neste site)
• word-spacing
• letter-spacing
• white-space
• word-break
• line-break
• word-wrap
• direction (à titulo informativo)
• writing-mode (à titulo informativo)
• hyphens (link abre tutorial neste site)

Vejamos, a seguir, cada uma delas.

text-indent

Esta propriedade destina-se a definir um espaçamento horizontal a ser deixado antes do início da primeira linha do texto, ou seja, define a indentação (ou tabulação) da primeira linha do texto.

Os valores possíveis para esta propriedade são: uma unidade de medida CSS, porcentagem (refere-se a largura do box onde o texto foi inserido) e valor herdado. ( Ver Herança CSS )

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { text-indent: 50px; }
p { text-indent: 10%; }
p { text-indent: 3rem; }
div { text-indent: 3em; }

Voltar ao índice

text-align

Esta propriedade destina-se a definir o alinhamento horizontal do texto. Trata-se de uma propriedade herdada.

Os valores possíveis para esta propriedade são.

left

Alinha o texto à esquerda do box. Este é o valor inicial (ou default).

right

Alinha o texto à direita do box.

center

Alinha o texto no centro do box.

justify

Alinha o texto de modo que cada linha estenda-se da esquerda à direita do box.

inherit

O valor do alinhamento do texto é herdado.

start

Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.

end

Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.

match-parent

Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.

justify-all

Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { text-align: right; }
p { text-align: justify; }
p { text-align: left; }
div { text-align: center; }

Voltar ao índice

text-align-last

A propriedade text-align-last consta do Rascunho de Trabalho do W3C - Prevista para o futuro.

Voltar ao índice

text-transform

Esta propriedade destina-se a definir os efeitos de capitalização (maiúsculas, minúsculas) do texto. Trata-se de uma propriedade herdada.

Os valores possíveis para esta propriedade são.

capitalize

Causa o efeito de transformar as primeiras letras das palavras do texto em maiúscula.

uppercase

Causa o efeito de transformar todas as letras das palavras do texto em maiúscula.

lowercase

Causa o efeito de transformar todas as letras das palavras do texto em minúsculas.

none

Não causa qualquer efeito de transformação.

inherit

A capitalização do texto é herdada.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { text-transform: uppercase; }
p { text-transform: capitalize; }
p { text-transform: none; }
div { text-transform: lowercase; }

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

ver a pen Estilizar textos - 1 by Maujor (@Maujor) no CodePen.

text-decoration

Esta propriedade destina-se a definir uma linha decorativa para o texto ou fazer com que o texto "pisque". Trata-se de uma propriedade que se propaga para elementos descendentes, mas não pode ser classificada como propriedade herdada, pois não é possível sobrescrever a "herança" como acontece com propriedades herdadas.

Os valores possíveis para esta propriedade são.

underline

Causa o efeito sublinhado. A linha decorativa é desenhada sob o texto.

overline

Causa o efeito superlinhado. A linha decorativa é desenhada sobre o texto.

line-through

Causa o efeito riscado. A linha decorativa é desenhada riscando o texto.

blink

Causa o efeito de texto "piscante". Critérios de acessibilidade fazem com que a maioria dos navegadores não implementem este efeito.

none

Não desenha uma linha decorativa no texto.

Por padrão a cor da linha decorativa é a mesma cor definida para o elemento para o qual a propriedade foi definida e a espessura da linha é função do seu tamanho de fonte (font-size).

Definida uma linha decorativa para um elemento, todos os seus descendentes serão decorados com linhas na cor e espessura conforme a cor e o tamanho de fonte do elemento. Se um elemento descendente ter sua cor alterada a linha decorativa não terá sua cor alterada, contudo se o tamanho de fonte do elemento descendente for alterado a linha decorativa será alterada.

É válido definir mais de um efeito decorativo para o texto. Neste caso os valores devem ser separados por espaço em branco e mais de uma efeito será aplicado ao texto.

Existem, ainda, as propriedades text-decoraton-line, text-decoration-color e text-decoration-style que se destinam a definir, respectivamente, a posição, a cor e o estilo da linha decorativa.
Alerta: O suporte a estas três propriedades é precário à epoca que este tutorial foi atualizado em 2016

Os valores possíveis para esta propriedade são.

solid

Cria uma linha decorativa sólida (contínua).

double

Cria uma linha decorativa dupla.

dotted

Cria uma linha decorativa pontilhada.

dashed

Cria uma linha decorativa tracejada.

wavy

Cria uma linha decorativa ondulada.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar estas propriedade.

p { text-decoration: underline; }
p { text-decoration: overline; }
p { text-decoration: line-through; }
p { text-decoration: overline underline; }
p { text-decoration-line: underline; }
p { text-decoration-color: red; }
p { text-decoration-style: dashed; }

Voltar ao índice

text-underline-position

Esta propriedade destina-se a definir a posição do sublinhado do texto. Por padrão a linha sublinhada obtida com a propriedade text-decoration posiciona o sublinhado na linha base (baseline) tipográfica do texto. Com esta propriedade é possível alterar a posição para: por baixo da linha tipográfica das descendentes ou colocá-la à esquerda ou direita do texto em escrita oriental.

Voltar ao índice

text-emphasis e text-emphasis-position

Estas propriedades destinam-se a decorar texto em escrita oriental.

Voltar ao índice

text-overflow

Para entender os efeitos desta propriedade é preciso que você conheça a propriedade white-space (ir para white-space)

Um texto extrapola, na horizontal, seu container de largura fixa em duas situações: quando se declarada white-space: nowrap ou quando uma palavra do texto tem comprimento maior do que a largura do container.

Por padrão a parte do texto que extrapola o container (texto em overflow) é renderizada normalmente. Declarando-se overflow: hidden para o container é possível "esconder" o texto que extrapolou o container sobresrevendo aquele comportamento padrão. Esta propriedade controla como será a apresentação da parte final do texto que permaneceu dentro do container.

Os valores possíveis para esta propriedade são.

clip

Corta o texto exatamente na linha vertical que passa pelo lado direito do container. Neste caso é possível até mesmo que uma letra do texto seja cortada na vertical. Este é o valor padrão da propriedade.

ellipsis

Insere três pontos (...) antes do corte do texto. É a convenção típica indicativa de interrupção de texto.

string

Este valor insere uma string antes do corte do texto. É um valor que está em fase de estudo de implementação pelo W3C.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { text-overflow: clip; }
p { text-overflow: ellipsis; }
p { text-overflow: "."; } /* em estudo no W3C */
p { text-overflow: " "; } /* em estudo no W3C */

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

Ver Pen Estilizar textos - 2 by Maujor (@Maujor) no CodePen.

text-orientation

A propriedade text-orientation é útil para escrita oriental e consta do Rascunho de Trabalho do W3C - Prevista para o futuro.

Voltar ao índice

word-spacing

Esta propriedade controla o espaçamento entre as palavras do texto.

Os valores possíveis para esta propriedade são.

normal

É o valor padrão da propriedade.

unidade de medida CSS

Definir uma unidade de medida CSS (px, em, cm) para esta propriedade causa um espaçamento entre palavras igual a quantidade definida. É admissível valores negativos que causam o efeito de contrair o espaçamento padrão.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { word-spacing: 8px; }
p { word-spacing: -1em; }
p { word-spacing: 3ex }
p { word-spacing: -0.5mm; }

Voltar ao índice

letter-spacing

Esta propriedade controla o espaçamento entre as letras da palavra.

Os valores possíveis para esta propriedade são.

normal

É o valor padrão da propriedade.

unidade de medida CSS

Definir uma unidade de medida CSS (px, em, cm) para esta propriedade causa um espaçamento entre letras igual a quantidade definida. É admissível valores negativos que causam o efeito de contrair o espaçamento padrão.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { letter-spacing: 8px; }
p { letter-spacing: -1em; }
p { letter-spacing: 3ex }
p { letter-spacing: -0.5mm; }

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

Ver Pen Estilização de textos - 3 by Maujor (@Maujor) no CodePen.

white-space

Esta propriedade controla como serão tratados os espaços em branco inseridos na marcação HTML do texto.

Os valores possíveis para esta propriedade são.

normal

É o valor padrão da propriedade. Qualquer quantidade de espaços em branco na marcação será renderizada como um espaço.

pre

A quantidade de espaços em branco será renderizada exatamente como inserida na marcação. As quebras de linhas ocorrerão quando houver quebra de linha na marcação. Pode ocorrer overflow.

nowrap

Qualquer quantidade de espaços na marcação será renderizada como um espaço, contudo não haverá quebra de linha. O texto extrapola o container (overflow)

pre-wrap

A quantidade de espaços em branco será renderizada exatamente como inserida na marcação. As quebras de linhas ocorrerão quando houver quebra de linha na marcação ou para evitar overflow.

pre-line

A quantidade de espaços em branco será renderizada exatamente como inserida na marcação. As quebras de linhas ocorrerão quando houver quebra de linha na marcação ou para completar uma linha.

inherit

Valor herdado.

A tabela a seguir mostra, para cada valor definido para a propriedade, como serão tratadas as novas linhas, espaçamentos e tabulações e acomodação do texto dentro do container.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { white-space: pre; }
p { white-space: nowrap; }
p { white-space: pre-line }
p { white-space: normal; }

Voltar ao índice

word-break

Esta propriedade controla a possibilidade de quebra de linha dentro de uma palavra.

Os valores possíveis para esta propriedade são.

normal

É o valor padrão da propriedade. A quebra de linha segue o comportamento normal

break-all

Quebra de linha poderá ocorrer dentro de uma palavra, exceto se definido ao contrário pela propriedade line-break.

keep-all

Quebra de linha não poderá ocorrer dentro de uma palavra, tal como no valor normal, inclusive quando definido ao contrário pela propriedade line-break.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { word-break: keep-all; }
p { word-break: normal; }
p { word-break: break-all }

Voltar ao índice

line-break

Esta propriedade controla a possibilidade de quebra de linha dentro de uma palavra.

Os valores possíveis para esta propriedade são.

normal

É o valor padrão da propriedade. A quebra de linha segue o comportamento normal

break-all

Quebra de linha poderá ocorrer dentro de uma palavra, exceto se definido ao contrário pela propriedade line-break.

keep-all

Quebra de linha não poderá ocorrer dentro de uma palavra, tal como no valor normal, inclusive quando definido ao contrário pela propriedade line-break.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { line-break: keep-all; }
p { line-break: normal; }
p { line-break: break-all }

Voltar ao índice

word-wrap

Esta propriedade controla a possibilidade de quebra de linha dentro de uma palavra.

Os valores possíveis para esta propriedade são.

normal

É o valor padrão da propriedade. A quebra de linha segue o comportamento normal

break-word

Quebra de linha poderá ocorrer dentro de uma palavra.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

p { word-wrap: normal; }
p { word-wrap: break-word; }

Voltar ao índice

direction e writing-mode

Estas propriedades destinam-se a definir a direção e disposição do texto. São usadas em escrita oriental.

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

Ver Pen Estilizar-textos - 4 by Maujor (@Maujor) no CodePen.

Compartilhe essa matéria com seus amigos