Swift

A propriedade CSS Text

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:
Texto com recuo de 30px
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:
Espaçamento entre letras
Quanto maior o valor em ‘px’ mais distante ficará as letras umas das outras.
2) letter-spacing:-1px:
Espaçamento entre letras
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:
Espaçamento entre linhas

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:
Texto com line-height: 2px

Texto com line-height: 2px
Texto com line-height: 20px

Texto com line-height: 20px

Texto com line-height: 1.8em
Texto com line-height: 1.8em

Texto com line-height: 1.4em
Texto com line-height: 1.4em
Texto com line-height: 1.2em
Texto com line-height: 1.2em
Aplicando espaçamento de 3px entre linhas à todos os textos marcados com <p>
p {line-height: 3px;}

You Might Also Like

0 comentários

Facebook 2018

Visitas

Flickr Images