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:
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, H2Teremos 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, H2O 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
H2O 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, H2O 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?