Maiúsculo, Minúsculo e Capitalizado - O atributo text-transform
Como fazer para deixar um texto totalmente em fontes cujas letras são maiúsculas?Ora, só escrever com a tecla Caps Lock ativada que não tem erro.
E se você pegou um texto em minúsculo da internet ou tinha escrito anteriormente em minúsculo?
Como fazer para deixar maiúsculo?
Ok, diversos programas de edição de textos como o Microsoft Office fornecem essa opção.
Mas e se você quiser, por exemplo, deixar todos os textos das tags H1 em maiúsculo?
Vai copiar e colar todas estas tags de cabeçalho no Word?
E se você for contratado por um portal grande, com dezenas de milhares de páginas, e como sua primeira tarefa eles te mandam colocar todas as tags de cabeçalho em maiúsculo e o último parágrafo de cada artigo capitalizado (a primeira letra, de cada palavra, em maiúscula).
E aí, o que você faz?
Pode fazer no Word? Claro que pode, mas iria ter um trabalho gigantesco, quase que humanamente impossível.
Mas relaxe, você estudou pelo Curso HTML Progressivo e domina a arte da estilização de sites com CSS, e vai aprender agora como fazer de uma maneira muito simples, rápida e extremamente eficaz e poderosa, usando o atributo "text-transform".
Fonte Maiúscula em CSS - text-transform: uppercase
Para fazer isso, usamos a propriedade "text-transform" e o valor "uppercase" (maiúscula, em inglês).
Assim, a sintaxe é:
text-transform: uppercase;
Por exemplo, para que uma tag de cabeçalho H2 seja exibida toda em maiúscula, podemos usar o seguinte código em uma folha de estilos CSS:
h2 { text-transform: uppercase; }
Vejamos outros exemplos de código, que contém uma frase minúscula, mas por ter usado o text-transform com o uppercase, o resultado no site vai ser a frase maiúscula:
<div style="text-transform: uppercase;>apostila html progressivo</div>
Resultado:
APOSTILA HTML PROGRESSIVO
Fonte Minúscula em CSS - text-transform: lowercase;
Sem segredos, para deixarmos um determinado texto com todas as suas letras minúsculas, usamos a propriedade "text-transform" com a seguinte sintaxe:text-transform: lowercase;
Assim no caso da uppercase, o lowercase faz com que o texto fique em minúsculo, não importando a maneira que você escreva.
Fonte Capitalizada em CSS - text-transform: capitalize;
Existem, basicamente, três maneiras de exibir uma fonte: em minúsculo, maiúsculo ou capitalizado.Um texto capitalizado é aquele em que todas as primeiras letras, de cada palavra, estão em maiúsculo e o restante minúsculo.
Por exemplo:
O Html Progressivo É Uma Apostila Online De Html E Css.
Assim, a sintaxe para esta propriedade CSS é:
text-transform: capitalize;
Este tipo de formatação de texto é muito comum em Marketing, por exemplo, pois um título que contém a primeira letra de cada palavra em maiúscula costuma chamar bastante atenção.
Se você notar as ofertas que aparecem em redes sociais ou no seu e-mail, vai notar o uso da formatação de textos capitalizados.
Por exemplo o seguinte código:
<div style="text-transform: capitalize">embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto</div>
Cujo resultado é o seguinte texto, capitalizado pelo CSS:
embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto
Ou seja, se um dia precisar colocar seu texto em maiúsculo, minúsculo ou capitalizar, não precisa quebrar a cabeça com o Word, afinal você é um webmaster, cria sites e sabe HTML&CSS, então use a propriedade text-transform para transformar seus textos.
6 comentários:
Awin muito obrigada, me ajudou muito!
Blogueira Bipolar
valeuu me ajudou, obrigado
muito obrigado, ajudou muito. Parabéns
Utilizei este código, "text-transform: capitalize;" mas só funcionou com textos em minúsculo. Para TEXTOS MAIÚSCULOS, não funcionou. Existe algum outro código para esse caso ?
Eu já sabia desta propriedade, é muito bacana mesmo, mas só funciona com o texto em minúsculo como o Alvaro-pozzetti@gmail.com disse.
E para títulos de páginas web, exemplo: MEUsite.html; EUcatex.html
Como fazer isso ou possibilitar isso em linguagem CSS / HTML?
Postar um comentário