0

Propriedades CSS – TEXT

cssPropriedades Text

As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.

As propriedades para textos são as listadas abaixo:

Propriedade
Efeito
color:
Cor da fonte;
letter-spacing:
Espaçamento entre letras;
word-spacing:
Espaçamento entre palavras;
text-align:
Alinhamento do texto;
text-decoration:
Decoração do texto;
text-indent:
Recuo do texto;
text-transform:
Forma das letras;
direction:
Direção do texto;
white-space:
Como o browser trata os espaços em branco;

Valores válidos para as propriedades de Text.

  • color:
    • código hexadecimal: #FFFFFF
    •  código rgb: rgb(255,235,0) 
    •  nome da cor: red, blue, green…etc
  • letter-spacing: 
    •  normal: é o espaçamento default 
    • lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
  • word-spacing: 
    •  normal: é o espaçamento default 
    •  lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
  • text-align: 
    •  left: alinha o texto a esquerda 
    •  right: alinha o texto a direita 
    •  center: alinha o texto no centro 
    •  justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
  • text-decoration: 
    •  none: nenhuma decoração 
    •  underline: coloca sublinhado no texto 
    •  overline: coloca um sobrelinhado no texto 
    •  line-through: coloca uma linha em cima do texto 
    •  blink: faz o texto piscar
  • text-indent: 
    •  lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) 
    •  % : porcentagem da largura do elemento pai
  • text-transform: 
    •  none: texto normal 
    • capitalize: todas as primeiras letras do texto em maiúsculas 
    • uppercase: todas as letras do texto em maiúsculas 
    • lowercase: todas as letras do texto em minúsculas
  • direction: 
    •  ltr: texto escrito da esquerda para a direita 
    •  rtl: texto escrito da direita para a esquerda
  • white-space: 
    •  normal: os espaços em branco serão ignorados pelo browser 
    •  pre: os espaços em branco serão preservados pelo browser 
    •  nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag 

Exemplos:

1- Espaçamento nas Letras letter-spacing

 
2- Espaçamento nas Palavras word-spacing
3- Alinhamento do Texto text-align
4- Decoração do Texto text-decoration
5- Recuo do Texto text-indent
6- Forma das Letras text-transform

Paulo R. Marinho

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

− 6 = 2