Articles
Introdução ao CSS
Propriedades de CSS relacionadas ao texto

Propriedades de CSS relacionadas ao texto

Este artigo explica as propriedades de CSS relacionadas ao texto.

Você pode aprender sobre o uso e como escrever as propriedades text-align, text-decoration e text-transform.

YouTube Video

Criando HTML para visualização

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Tipografia (Relacionada ao Texto)

Propriedade text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align é uma propriedade no CSS usada para especificar o alinhamento horizontal do texto e elementos inline. É tipicamente usado para alinhar texto de parágrafo ou cabeçalhos à esquerda, à direita ou ao centro. Ela desempenha um papel importante na formatação de texto e no layout de páginas da web.

Principais valores para text-align

left (alinhado à esquerda) 
1p {
2    text-align: left;
3}
  • left alinha o texto à esquerda (este é o método de alinhamento padrão para muitos idiomas).
right (alinhado à direita) 
1p {
2    text-align: right;
3}
  • right alinha o texto à direita. É especialmente eficaz para idiomas escritos da direita para a esquerda, como árabe e hebraico.
center (centralizado) 
1p {
2    text-align: center;
3}
  • center alinha o texto ao centro. É frequentemente usado para títulos e cabeçalhos.
justify (justificado) 
1p {
2    text-align: justify;
3}
  • justify alinha igualmente as bordas esquerda e direita das linhas, proporcionando uma impressão de alinhamento uniforme. É usado em layouts como jornais e revistas.
start (alinhado ao início) 
1p {
2    text-align: start;
3}
  • start alinha o texto com base na posição inicial. Para idiomas escritos da esquerda para a direita, ele se comporta da mesma forma que o alinhamento à esquerda.
end (alinhado ao final) 
1p {
2    text-align: end;
3}
  • end alinha o texto com base na posição final. Em idiomas escritos da esquerda para a direita, ele se comporta da mesma forma que o alinhamento à direita.

Uso de text-align e exemplos

Título usando alinhamento central
  • O alinhamento central é frequentemente usado para títulos de páginas da web e documentos. Fica esteticamente agradável e resulta em um design visualmente equilibrado.
Alinhamento à esquerda ou à direita para parágrafos
  • Os parágrafos de texto são geralmente alinhados à esquerda por padrão, mas o alinhamento à direita ou central pode ser usado para designs específicos.
Justificando texto uniformemente
  • Quando justificado com justify, cada linha de texto é igualmente alinhada com as bordas esquerda e direita. É útil para layouts no estilo de jornais ou revistas.

Resumo

  • text-align é uma propriedade CSS usada para alinhar horizontalmente texto ou elementos inline.
  • Ela pode tratar de vários layouts, como alinhamento à esquerda, à direita, centralizado e justificação.
  • Escolher o alinhamento apropriado com base no layout e nos objetivos de design é fundamental para alcançar um design legível e bonito.

Vamos usar o alinhamento de texto de forma eficaz como parte do seu design com o text-align.

A propriedade text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration é uma propriedade CSS usada para aplicar sublinhados, sobrelinhas, tachados ou linhas estilizadas personalizadas ao texto. Usando esta propriedade, você pode tornar o estilo do texto mais decorativo ou visualmente enfatizado.

Explicação:

  • A classe text-decoration-underline exibe um sublinhado no texto.
  • A classe text-decoration-overline desenha uma linha acima do texto.
  • A classe text-decoration-line-through aplica um tachado ao texto.
  • A classe text-decoration-custom-underline é um exemplo de personalização da cor, estilo e espessura do sublinhado.

Valores principais de text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Especificar none removerá quaisquer decorações do texto. Usado quando você deseja remover o sublinhado de links, por exemplo.
underline 
1p {
2    text-decoration: underline;
3}
  • Especificar underline desenhará um sublinhado sob o texto. Pode ser usado para links ou partes que você deseja enfatizar.
overline 
1p {
2    text-decoration: overline;
3}
  • Especificar overline desenhará uma linha acima do texto. Usado para alterar a aparência ou para decoração especial.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Especificar line-through desenhará um traço no meio do texto. É usado para indicar correções.
blink（点滅）
  • blink é um valor que faz o texto piscar, mas não é mais usado porque não é suportado pela maioria dos navegadores atualmente.

Configurações avançadas de text-decoration

text-decoration permite configurações detalhadas como a seguir:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • A propriedade text-decoration-color permite especificar a cor de sublinhados ou tachados. Por padrão, ela corresponde à cor do texto, mas você pode adicionar um destaque visual escolhendo uma cor diferente.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • A propriedade text-decoration-style permite especificar o estilo das linhas decorativas. Os valores incluem o seguinte:.
    • solid (Padrão, linha sólida)
    • double (linha dupla)
    • dotted (linha pontilhada)
    • dashed (linha tracejada)
    • wavy (linha ondulada)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • A propriedade text-decoration-thickness permite especificar a espessura das linhas decorativas. Você pode ajustá-la usando unidades como 2px ou 0.1em, por exemplo.

Resumo:

  • text-decoration é uma propriedade para adicionar linhas decorativas ao texto, como sublinhados ou tachados.
  • Com text-decoration-color, text-decoration-style e text-decoration-thickness, é possível uma personalização mais detalhada.
  • É frequentemente usado para enfatizar links ou textos importantes, ou como um elemento de design.

Usando text-decoration, você pode adicionar detalhes sutis ou ênfase ao texto.

Propriedade text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform é uma propriedade CSS para transformar a capitalização do texto. Esta propriedade permite controlar o formato de exibição do texto especificado em HTML, convertendo automaticamente a capitalização do texto inserido pelo usuário ou do texto existente.

Explicação:

  • A classe text-transform-none exibe o texto sem alterá-lo do original.
  • A classe text-transform-capitalize converte a primeira letra de cada palavra em maiúscula.
  • A classe text-transform-uppercase converte o texto inteiro em maiúsculas.
  • A classe text-transform-lowercase converte o texto inteiro em minúsculas.

Valores principais de text-transform

none 
1p {
2    text-transform: none;
3}
  • Especificar none deixa o texto inalterado.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Especificar capitalize converte a primeira letra de cada palavra em maiúscula. Os limites das palavras são reconhecidos por espaços ou pontuações.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Especificar uppercase converte o texto inteiro em maiúsculas.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Especificar lowercase converte o texto inteiro em minúsculas.
full-width
  • Especificar full-width converte o texto em caracteres de largura total. Isso é geralmente usado como um estilo especial ao lidar com Kanji ou Kana, mas poucos navegadores suportam.

Resumo:

  • text-transform é uma propriedade CSS conveniente para alterar a capitalização do texto.
  • É frequentemente usada para criar consistência visual em títulos, menus de navegação e textos em formulários.
  • É útil quando você deseja exibir o texto em um estilo específico, independentemente da entrada do usuário.

Ao usar esta propriedade, você pode facilmente manipular o texto enquanto mantém a consistência visual.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades de CSS Relacionadas a FontesPropriedades CSS relacionadas ao espaçamento de texto