A propriedade CSS Text

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Continuando a série: Aprendendo CSS e HTML no Blogger, hoje vamos conhecer as A propriedade CSS Text.
A propriedade “Text” trata das transformações e atributos aplicados a textos.

Conhecer esta propriedade é peça chave na hora de estilizar ou editar seu layout no Blogger.

Neste artigo, serão discutidas as propriedades:
? text-ident
? text-align
? text-decoration
? text-transform
? letter-spacing
? word-spacing
? line-height

Text-ident:Indentação de texto

Esta propriedade permite que você aplique um recuo à primeira linha de um parágrafo, dentro de um elemento.
Os valores que podemos utilizar, são similares aos que utilizamos para imagens.
Exemplo:

seletor {text-indent: 30px;}

Utilizando a propriedade acima, o texto no elemento que você classificou, ficará assim:

Se quiser que seja aplicado à todos os paragrafos do post:

.post p {text-indent: 30px;}

Este efeito só aparecerá nos trechos que estiverem entre <p> e </p>

Text-align: Alinhamento de textos

Esta propriedade permite que os textos sejam alinhados à esquerda (text-align:left), à direita (text-align:right) ou no centro (text-align:center). E temos ainda o valor justify (text-align: justify), que permite o alinhamento justificado, que faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita.
Você pode aplicar esta propriedade no CSS do seu template, de forma que seja reconhecida e aplicada a todos os elementos aos quais você estipulou.
Exemplo:

.post h3 {text-align: center;}
.post-body {text-align: justify;}

No exemplo acima, os titulos das postagens se apresentarão alinhados ao centro, e no corpo dos posts, seus textos se apresentarão com alinhamento justificado.

Text-decoration: Decoração de textos

Esta propriedade permite adicionar ou retirar efeitos e decoração em textos, que podem ser: sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto etc.
Para a decoração do texto você pode atribuir as seguintes variaveis:

text-decoration: underline; ->sublinhado

text-decoration: line-through; ->Texto com linha em cima

text-decoration: overline; -> sobrelinhado

text-decoration: blink; -> pisca

text-decoration: none; -> sem decoração ou efeito

O Internet Explorer(maldito IEca!)e o Opera, não suportam a propriedade blink. Para que alguns efeitos sejam reconhecidos, pode-se aplicar propriedades específicas para cada uma delas, ajustando o valor true(verdadeiro) ou false(falso):

this.style.textDecorationNone='true | false';
this.style.textDecorationUnderline='true | false';
this.style.textDecorationOverline='true | false';
this.style.textDecorationLineThrough='true | false';
this.style.textDecorationBlink='true | false';

Text-transform:Transformação de textos

Esta propriedade permite transformações no formato caixa-alta ou caixa-baixa do texto.
Para utilizar a propriedade de transformação de textos, você pode atribuir as seguintes variaveis:
text-transform: none; -> sem efeito
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas
text-transform: uppercase; -> TODAS AS LETRAS MAIUSCULAS
text-transform: lowercase; -> todas letras minúsculas

A propriedade text-shadow, permite aplicação de sombras no texto, mas só é visivel em alguns navegadores. Sobre esta propriedade, leia Efeito Sombra nos Textos.

letter-spacing:Espaço entre letras

Esta propriedade permite definir o espaço entre os caracteres, ou seja, altera o espaço entre as letras.

seletor {letter-spacing: valor;}

Exemplos:
1) letter-spacing:20px:

Quanto maior o valor em ‘px’ mais distante ficará as letras umas das outras.

2) letter-spacing:-1px:

O valor negativo (-1px) faz com que as letras se aproximem mais umas das outras.

Aplicando espaçamento de 3px entre letras à todos os textos marcados com <p>
p {letter-spacing: 3px;}

Word-spacing:Espaço entre palavras

Esta propriedade serve para determinar a distância ou o espaçamento entre as palavras.
seletor {word-spacing: 20px;}
Exemplo:

line-height:Espaço entre palavras

Esta propriedade permite controlar o espaço que existe antes e depois de uma linha de texto, especificando a altura total de uma linha de texto.

seletor {line-height: valor;}

Exemplos:

 

 

 

 

Aplicando espaçamento de 3px entre linhas à todos os textos marcados com <p>

p {line-height: 3px;}

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn