Conhecendo a propriedade do CSS text-transform

Gunnar CorreaGunnar Correa03/02/2015 às 10:35:13 - 18.369 acessos

Aprenda a utilizar a propriedade CSS text-transform e mude a forma de como os textos são apresentados.


Você já deve ter se deparado com algum tipo de problema onde seu texto esta começando com letras minúsculas, ou que seja necessário imprimir na tela algo com todas as letras maiúsculas ou minúsculas, certo?

Pois bem, o CSS tem uma propriedade chamada text-transform que nos permite formatar uma TAG HTML, isto mesmo, através do seletor podemos escolher o que formatar.

Abaixo temos uma ilustração do que é um Seletor, Propriedade e valor.

Estrutura do corpo de um elemento CSS

Primeiramente, precisamos do nosso HTML, neste exemplo vou utilizar três parágrafos, você pode observar apenas o Código HTML no código abaixo.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Text-transform</title>
		<meta charset="utf-8">
		<style type="text/css">
		
		</style>
	</head>
	<body>
		<p id="uppercase">SatellaSoft - Tecnologia em Dados da Informação</p>
		<p id="lowercase">SatellaSoft - Tecnologia em Dados da Informação</p>
		<p id="capitalize">satellasoft - tecnologia em dados da informação</p>
	</body>
</html>

Modificando textos no CSS.

Bom, temos  nosso HTML com os parágrafos já com os ID definidos, agora só nos basta aplicar as formatações no CSS, então vamos a explicação e depois aplicação.

A propriedade Text-transform assume quatro valores, None, Capitalize, Uppercase, Lowercase, vamos entender o que cada valor deste faz.

None = Nenhuma formatação (traduzido seria nenhum).
Capitalize = As primeiras letras de cada palavra ficam com letras maiúsculas (traduzindo seria Capitalizar).
Uppercase = Coloca todas as letras em maiúscula (traduzindo seria maiúscula).
Lowercase = Coloca todas as letras em minúsculas (traduzindo seria minúscula).

O None geralmente é utilizado quando já se tem um valor, como Capitalize, Uppercase ou Lowercase aplicado e queremos  remover esta formatação, por padrão este valor é automático para todos os text-transform mesmo quando não utilizamos.

Vamos agora colocar em prática o que aprendemos teoricamente , para isto é muito simples, basta dentro do nosso atributo declarar a propriedade text-transform e aplicar o valor na qual você pretende utilizar, veja o exemplo no código abaixo.

Código 02:

#uppercase{
	text-transform: uppercase;
}
			
#lowercase{
	text-transform: lowercase;
}
			
#capitalize{
	text-transform: capitalize;
}

O resultado será como mostrado na imagem abaixo, agora você pode perceber melhor como tudo funciona na prática, e melhor que isto, percebe também que é muito fácil utilizar esta propriedade.

Alterando tamanho das letras no CSS

Espero que tenham aprendido, em caso de dúvidas, deixe um comentário.

Até a próxima.


css text-transform formatação texto marcação html layout estilização client side matéria informática

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários