Propriedade de transformação de texto em CSS

Propriedade de transformação de texto em CSS

O texto é uma das partes mais significativas de qualquer página da web. Cada site tem texto em qualquer forma I.e. Pode ser um parágrafo, títulos, etc. Portanto, o CSS fornece uma ampla gama de propriedades de texto para estilo e formatação do texto como alinhamento de texto, cor de texto, transformação de texto, etc.

Todas essas propriedades realizam funcionalidades diferentes, por exemplo, o alinhamento de texto determina o alinhamento do texto i.e. centro, direita, esquerda, etc. A propriedade-cor de texto define a cor do texto i.e. vermelho, verde, etc., e assim por diante. No entanto, este artigo se concentrará na propriedade de transformação de texto.

Este artigo apresenta uma visão geral detalhada da propriedade de transformação de texto junto com alguns exemplos.

propriedade de transformação de texto

Uma propriedade CSS mais comumente usada que determina a aparência do texto em termos de caso de texto I.e. se o texto estará em minúsculas ou maiúsculas. Além disso, também pode ser usado para capitalizar o caráter inicial de cada palavra.

O funcionamento dos seguintes valores será discutido neste artigo com a ajuda de exemplos:

  • maiúsculas: Converte todos os personagens do texto em maiúsculas.
  • minúsculo: Converte todos os caracteres do texto em minúsculas.
  • capitalizar: Converte o caráter inicial de cada palavra em uma letra maiúscula.
  • nenhum: Ele mostra o comportamento padrão da propriedade de transformação de texto i.e. O texto será exibido da mesma maneira que está escrito.

Como usar o valor da maçaneta para a propriedade de transformação de texto

O valor superior transforma todos os caracteres em maiúsculas

Exemplo
Neste exemplo, o texto é uma mistura de letras maiúsculas e minúsculas. No entanto, a atribuição de valor superior à propriedade Transform a texto transformará todas as letras em maiúsculas:

Html

Propriedade de transformação de texto


Este é o primeiro parágrafo


Este é o segundo parágrafo


Este é o terceiro parágrafo

CSS

P, H2
TRANSFORMA DE TEXTO: OUPERCASE;

Teremos a seguinte saída:

Cada letra é transformada na letra da mancha.

Como usar o valor minúsculo para a propriedade de transformação de texto

Ele converterá cada caractere do texto em minúsculas.

Exemplo

No código abaixo, a primeira letra de cada palavra é uma letra maiúscula, no entanto, atribuindo um valor minúsculo à propriedade de transformação de texto transformará todo o texto em minúsculas:

Html

Propriedade de transformação de texto


Este é o primeiro parágrafo


Este é o segundo parágrafo


Este é o terceiro parágrafo

CSS

P, H2
transformação de texto: minúscula;

O código acima gera a seguinte saída:

Cada carta é transformada na letra minúscula.

Como usar o valor capitalizado para propriedade de transformação de texto

Como o próprio nome sugere, capitalizou a primeira letra de cada palavra. O exemplo abaixo mostrará o funcionamento do valor capitalizado.

Exemplo

No script abaixo, cada letra do documento está em minúsculas e o valor do capitaiize é utilizado para o elemento H2, para que ele converta a primeira letra de cada palavra em capital:

Html

Propriedade de transformação de texto


este é o primeiro parágrafo


Este é o segundo parágrafo


Este é o terceiro parágrafo

CSS

H2
TRANSFORMA DE TEXTO: capitalizar;

O código acima gera a seguinte saída:

A primeira letra de cada palavra é transformada em letra maiúscula.

Como usar nenhum valor para propriedade de transformação de texto

O nenhum valor impede todo o texto da transformação do texto i.e. renderiza todos os personagens como está. O exemplo abaixo permitirá que você entenda como usar “nenhum”Valor para a propriedade de transformação de texto.

Exemplo

A seguinte parte do código implementa a propriedade de transformação de texto em um elemento P, H2:

Html

Propriedade de transformação de texto


Este é o primeiro parágrafo


Este é o segundo parágrafo


Este é o terceiro parágrafo

CSS

P, H2
transformação de texto: nenhum;

O código acima não mudaria a aparência do texto:

Todo o texto permanece inalterado.

Conclusão

CSS fornece propriedade de transformação de texto para controlar a transformação do texto I.e. minúsculas e maiúsculas convertem todas as letras em minúsculas e maiúsculas, respectivamente, e o valor nenhum torna o texto no caso padrão. A propriedade capitalizada torna o primeiro personagem de cada palavra em maiúsculas.

Este artigo explica como usar a propriedade de transformação de texto. Quais são os valores que podem ser usados ​​para a propriedade de transformação de texto e como esses valores afetam a aparência do texto?