Formatação de texto em CSS explicada

Lidar com o texto é a atividade mais comum em uma tarefa de computação. A formatação de texto no CSS permite personalizar várias propriedades do texto. A formatação de texto tem uma longa lista de propriedades que altera o comportamento do texto.

A formatação de texto é composta por propriedades como cor, alinhamento, decoração, indentação, espaçamento e muito mais. O objetivo deste guia é esclarecer a importância da formatação de texto no CSS e explorar as propriedades que podem ser usadas para formatação de texto.

Que tipo de formatação de texto no CSS é suportada?

A formatação de texto é auxiliada por várias propriedades descritas aqui e a sintaxe dessas propriedades também é definida.

Alinhamento: Alinha o texto usando a sintaxe escrita abaixo.

seletor text-align: value;

O valor do alinhamento de texto pode ser:

• Direita: o texto estaria do lado direito do elemento
• Esquerda: a margem esquerda das linhas é reta
• Centro: o texto estaria no centro e as margens esquerda/direita serão iguais
• Justificar: o texto é organizado de uma maneira que as margens esquerda e direita são mantidas retas e iguais

Exemplo:

O texto é alinhado à esquerda

O texto é centrado em alinhado

O texto é alinhado direito

O texto é justificado

Quatro classes CSS são criadas, a classe "esquerda" representa o alinhamento esquerdo do texto. Da mesma forma, o "direito", "centavo" e "justo" são usados ​​para alinhar o texto à direita, centralizada e justificada.

Saída

Espaçamento de cartas: É usado para definir o espaço entre as letras de uma palavra em px, em, mm ou cm.

Seletor Espacamento de letras: Value;

Exemplo: Para verificar a funcionalidade da propriedade de espaçamento de cartas, usamos o seguinte código.

O espaçamento da carta é 5px

O espaçamento da carta é 0.5em

O espaçamento da carta é de 1 mm

No código acima, as classes CSS são criadas para definir o espaçamento de cartas em PX, EM e MM.

Saída

Espaçamento de palavras: Esta propriedade é usada para adicionar espaço entre as palavras de uma linha.

Seletor Espacamento de palavras: value;

Exemplo: A palavra propriedade de espaçamento é fornecida usando as seguintes linhas de código.

Cada palavra será separada por 10px

Uma classe CSS é criada para criar um espaço de 10px entre as palavras.

Saída

Cor: Isso define a cor do texto que está sendo usada com a ajuda de seguir a sintaxe.

Seletor Color: Value;

O valor da propriedade colorida pode ser,

• nome da cor eu.e., Laranja vermelha
• Valor hexadecimal da cor (#00000)

Exemplo: O fornecido abaixo é exercido para definir a cor do

texto para vermelho.

Bem -vindo ao Linuxhint

Saída

Decoração: A decoração é realizada para executar ações em texto como sublinhado, linha de linha, superline e nenhum.

seletor decoração de texto: value;

O valor pode ser um dos seguintes

• linha-through: uma linha horizontal é colocada no texto
• Overline: uma linha é desenhada acima do texto
• Subline: a linha horizontal é colocada abaixo da linha
• Nenhum: nenhuma linha seria colocada

Exemplo:

texto sublinhado

alinhar através do texto

texto coberto

O código acima é composto por três classes CSS e três parágrafos. As classes CSS "Un", "LT" e "OV" representam o estilo de decoração e são usadas em três parágrafos diferentes.

Saída

Indentação: O recuo CSS é realizado para recuperar (mantendo o texto em espaço específico a partir da margem) a primeira linha do parágrafo.

seletor text-indent: value;

O valor pode estar em mm, cm, em, px.

Exemplo: Aqui, aplicamos a propriedade de recuo (em PX, EM e CM) em vários parágrafos no código.

O indentamento é definido como 25px

o indentamento é definido como 1em

o indentamento é definido como 1 cm

O código acima contém três classes CSS, e cada classe recupera o texto em diferentes unidades de medição.

Saída

Transformação: O caso do texto é gerenciado usando a propriedade de transformação seguida pela sintaxe dada aqui.

Seletor TEXT-TRANSFORM: value;

O valor pode ser um dos seguintes

• maiúsculas: alterar as letras para maiúsculas
• minúscula: muda as letras para a minúscula
• capitalizar: é usado para capitalizar a primeira letra de cada palavra

Exemplo: Você pode verificar a funcionalidade da transformação de texto a partir do código abaixo do ponto.

Conversão para baixo caso

conversão para o caso superior

Primeira palavra será captura

O código acima mencionado contém três classes CSS que devem transformar o texto do parágrafo em caso inferior, de casos superiores e capitalizar.

Saída

Altura da linha: A altura das linhas de texto pode ser definida usando a propriedade de altura de linha em PX, CM, EM e MM.

seletor altura de linha: value;

Exemplo: As seguintes linhas de código mostram o uso da propriedade de altura de linha para ajustar a altura das linhas de texto.

A altura da linha é 25px

A altura da linha é 2em

A altura da linha é de 1 cm

O código acima usa a altura da linha em PX, EM e CM. Além disso, o estilo de fronteira dos parágrafos está definido como sólido (para entender melhor o conceito de altura de linha).

Saída

Direção do texto: A direção de escrita do texto no CSS pode ser gerenciada usando a propriedade Direction.

seletor direção: value;

O valor pode ser RTL (direita para esquerda), LTR (esquerda para a direita), inicial () e herdar (buscada no elemento pai).

Exemplo:

A direção do texto é direita para a esquerda

É criada uma classe CSS que permite definir a direção da direita para a esquerda.

Saída

Shadow de texto: A sombra do texto é praticada adicionando sombra com várias propriedades.

seletor shadow text: value1 value2 value3;

Os valores são descritos da seguinte forma

• valor1 representa o tamanho horizontal da sombra
• valor2 define o tamanho vertical da sombra
• Value3 é usado para cores da sombra e pode ser o nome exato da cor, a combinação RGB/RGBA de uma cor, o valor hexadecimal de uma cor.

Exemplo: O código a seguir define uma sombra vertical e horizontal colorida.

Uma sombra vermelha de 1px é dada

É criada uma classe CSS chamada "sh" que cria uma sombra vermelha de 1px espessura no texto fornecido.

Saída

Depois de passar por esta seção, você teria obtido o entendimento de várias propriedades de formação de texto fornecidas pelo CSS.

Conclusão

A formatação de texto no CSS permite embelezar o texto usando as propriedades. Este artigo fornece o trabalho e o uso de todas as propriedades de formatação de texto suportadas pelo CSS. Cada propriedade é guiada pela sintaxe que segue e um exemplo também é fornecido para entender seu uso. Este guia abrangente permitiria que você aplique todos os tipos de possíveis formatação de texto no CSS.

Mantenha -se conectado ao Linuxhint para obter mais guias informativos sobre CSS e HTML.