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; }
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; }
text-align-last
A propriedade text-align-last consta do Rascunho de Trabalho do W3C - Prevista para o futuro.
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; }
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; }
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.
text-emphasis
e text-emphasis-position
Estas propriedades destinam-se a decorar texto em escrita oriental.
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 */
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.
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; }
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; }
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.
Novas linhas | Espaçamentos e tabulações | Acomodação do texto | |
---|---|---|---|
‘normal ’
| Transformado em um só espaço | Transformado em um só espaço | Com quebra de linha |
‘pre ’
| De acordo com a marcação HTML | De acordo com a marcação HTML | Não há quebra de linha |
‘nowrap ’
| Transformado em um só espaço | Transformado em um só espaço | Não há quebra de linha |
‘pre-wrap ’
| De acordo com a marcação HTML | De acordo com a marcação HTML | Com quebra de linha |
‘pre-line ’
| De acordo com a marcação HTML | Transformado em um só espaço | Com quebra de linha |
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; }
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 }
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 }
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; }
direction
e writing-mode
Estas propriedades destinam-se a definir a direção e disposição do texto. São usadas em escrita oriental.
Pratique!
Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen
Ver Pen Estilizar-textos - 4 by Maujor (@Maujor) no CodePen.
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.