Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1487184857
Vida do cache: 1488480853
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Aprendendo CSS e HTML

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;}


De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

8 Comentários

  1. @theojesed disse:

    Dicas muito legais. Parabéns pelo blog!

  2. Natália disse:

    Brigadim Clau… Deus a abençoe sempre e parabéns pela capacidade que tens de lidar com esses códigos.
    Serei assídua aqui.

  3. Antônio Nazareth disse:

    Olá, queria saber como aplico o efeito negrito no título dos posts, abraços!!!

  4. .:: Clau ::. disse:

    Alexandrina Oliveira
    Quando vc instala um template ele possui configurações próprias para CSS e html. Por isso q muitas vezes ocorre alterações em posts antigos, ou no layout. A única forma é vc modificar as alterações manualmente, vai ter q mexer no código CSS pra modificar até ficar do jeito q vc gosta. Por isso q é importante, antes de baixar um template e instalar no blog, fazer um backup do antigo, e sempre visualizar o template modelo que vc está baixando, para ver como ele fica em funcionamento.

  5. Alexandrina Oliveira disse:

    clau instalei um novo template e a formatação de parágrafos dos posts sumiram, os ficaram como se fosse escritos tds em um unico parágrafo, em saltear linha, experimentei alguns outros templates e o problema não ocorreu, só ocorreu com dois templates, ja tentei mexer no css pra ver se conseguia fazer com que os posts anteriores não perdessem sua formatação original. há alguma forma, algum codigo que possamos usar para que ao istalar o template ele não mexa na configuração do posts antigos, pq no meu caso tanto sumiram os parágrafos, quanto até o alinhamento das imagens no post foram mexidos.

    desculpa te pertubar. desde ja agradeço.

  6. juniokamikaze disse:

    gostei esse blog is very good !!!

  7. Priscilla de la Fleuret disse:

    Adorei <3
    Parabéns pelo blog, está lindo *0*

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.