Ao escrever qualquer artigo ou documento, muitas vezes precisamos que alguns caracteres estejam em casos específicos. Em uma página web, o elemento HTML cujo texto precisa ser transformado é aplicado com a propriedade CSS “ transformação de texto ”. Essa propriedade também economiza tempo de forma que, após adicionar todos os caracteres, o caso deles pode ser transformado de uma só vez.

Este post vai te ensinar como podemos alterar maiúsculas e minúsculas de texto com CSS. Então vamos começar!

Como colocar texto em letras maiúsculas e minúsculas usando CSS?

Em CSS, o “ transformação de texto ” controla a capitalização do texto. Também é utilizado para converter texto em maiúsculas ou minúsculas.

Valores de propriedade text-transform

Os possíveis valores da propriedade CSS text-transform estão listados abaixo:

• • “ maiúsculo ”: Este valor torna todos os caracteres no texto do elemento em maiúsculas.
  • “ minúsculas ”: Este valor altera o texto do elemento para minúsculo.
  • “ capitalizar ”: Este valor altera a primeira letra maiúscula de cada palavra.
  • “ Nenhum ”: Este valor restringe o texto do elemento para modificação.
  • “ inicial ”: Este valor define o valor padrão.
  • “ você herda ”: Este valor define seu valor a partir de seu elemento pai.

Analise o exemplo abaixo!

Exemplo: Transformando Texto em Maiúsculas e Minúsculas

Primeiro, adicione um elemento div com o nome da classe “ caixa ”. Dentro do corpo, adicione três tags de cabeçalho

,

e

, onde o texto do cabeçalho

está todo em maiúsculas,

está em minúsculas e o terceiro também está em minúsculas.

Segue abaixo o código HTML:

< div aula = 'caixa' >
< h1 > minúsculo: BEM-VINDO AO LINUXHINT h1 >
< h2 > maiúsculo: bem-vindo ao linuxhint h2 >
< h3 > capitalizar: bem-vindo ao linuxhint h3 >
div >

Div da caixa de estilo

.caixa {
altura: 200px;
largura: 80 % ;
borda: 4px sólido #e4cfcf;
cor de fundo: cadetblue;
margem: 1px automático;
preenchimento: 10px;
}

O div criado no arquivo HTML acima agora é estilizado com as propriedades CSS explicadas abaixo:

• • “ altura ” é utilizado para definir a altura do div.
  • “ largura ” é utilizado para definir a largura do div.
  • “ fronteira ” é utilizada para aplicar a borda ao redor do elemento, que tem largura de 4px, tipo de linha sólida e cor #e4cfcf.
  • “ cor de fundo ” especifica a cor de fundo do elemento.
  • “ margem ” ajusta o espaço em todos os lados do elemento.
  • “ preenchimento ” é utilizada para produzir espaço ao redor do conteúdo do elemento div ou dentro da borda do elemento.

Os blocos de código abaixo indicam que todos os elementos de cabeçalho são estilizados com valores diferentes das propriedades de transformação de texto. O elemento

é aplicado com a propriedade text-transform com o valor definido como “ minúsculas ”:

h1 {
transformação de texto: minúsculas;
}

O elemento

é aplicado com a propriedade text-transform com o valor definido como “ maiúsculo ”:

h2 {
transformação de texto: maiúsculas;
}

Para o elemento

, o valor da propriedade text-transform é definido como “ capitalizar ”:

h3 {
transformação de texto: capitalizar;
}

Ao fornecer o código acima, o texto do primeiro cabeçalho é todo transformado em letras minúsculas e o segundo cabeçalho em maiúsculas. Considerando que a primeira letra de cada palavra é maiúscula no terceiro título:

Excelente! Aprendemos com sucesso como transformar o texto em maiúsculas, minúsculas e todas maiúsculas.

Conclusão

A propriedade text-transform do CSS controla a capitalização do texto e é utilizada para alterar as maiúsculas e minúsculas do texto do documento. Esta propriedade se aplica a todos os elementos, onde os valores desta propriedade podem ser letras maiúsculas, minúsculas, letras maiúsculas ou nenhum. Este blog explicou o procedimento de conversão de texto em maiúsculas e minúsculas usando a propriedade CSS text-transform.