A propriedade CSS text

Publicado em: 10/12/2003

Os textos nos elementos HTML

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 a seguir:

  • color.....................cor do texto;
  • 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 do texto

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

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

color — cor do texto

><html>
<head>
<style type="text/css">
<!--
h1 {color: #f00;}
h2 {color: #0f0;}
p {color: rgb(0,0,255);}
-->
</style>
</head>
<body>
<h1>Este  cabeçalho é vermelho</h1>
<h2>Este cabeçalho é verde</h2>
<p>Este parágrafo é azul</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Este cabeçalho é vermelho

Este cabeçalho é verde

Este parágrafo é azul

letter-spacing — espaço entre letras

<html>
<head>
<style type="text/css">
<!--
h2 {letter-spacing: 1.2em;}
p {letter-spacing: 0.4cm;}
-->
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Este é o cabeçalho

Este é o paragráfo

word-spacing — espaço entre palavras

<html>
<head>
<style type="text/css">
<!--
h2 {word-spacing: 1.8em;}
p {word-spacing: 80px;}
-->
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Este é o cabeçalho

Este é o paragráfo

text-align — alinhamento do texto

<html>
<head>
<style type="text/css">
<!--
h1 {text-align: left;}
h2 {text-align: center;}
h3 {text-align: right;}
p {text-align: justify;}
-->
</style>
</head>
<body>
<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
<p>Este é o parágrafo cujo texto ...</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Este é o cabeçalho 1

Este é o cabeçalho 2

Este é o cabeçalho 3

Este é o parágrafo cujo texto foi alongado para mais de duas linhas para que você possa visualizar o efeito de text-align: justify que força o texto a estender-se desde a direita até a esquerda.

text-decoration — decoração do texto

<html>
<head>
<style type="text/css">
<!--
h1 {text-decoration: underline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: overline;}
a {text-decoration: none;}
-->
</style>
</head>
<body>
<h1>Texto com sublinhado</h1>
<h2>Texto com linha em cima</h2>
<h3>Texto com sobrelinhado</h3>
<p>
<a href="http://www.maujor.com">
Este é um link sem sublinhado</a> </p> </body> </html>

Este é o efeito da folha de estilo acima:

Texto com sublinhado

Texto com linha em cima

Texto com sobrelinhado

Este é um link sem sublinhado

text-indent — recuo do texto

<html>
<head>
<style type="text/css">
<!--
h3 {text-indent: 80px;}
p {text-indent: 3em;}
-->
</style>
</head>
<body>
<h3>Texto com recuo de 80 pixel</h3>
<p>Texto com recuo de 3.0em</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Texto com recuo de 80 pixeis

Texto com recuo de 3.0em

text-transform — capitalização do texto

<html>
<head>
<style type="text/css">
<!--
h1 {text-transform: none;}
h2 {text-transform: capitalize;}
h3 {text-transform: uppercase;}
h4 {text-transform: lowercase;}
-->
</style>
</head>
<body>
<h1>Texto com letras como digitadas</h1>
<h2>Texto com primeira letra das palavras, maiúsculas</h2>
<h3>Texto com todas letras, maiúsculas</h3>
<h4>Texto com letras minúsculas</h4>
</body>
</html>

Este é o efeito da folha de estilo acima:

Texto com letras como digitadas

Texto com primeira letra das palavras, maiúsculas

Texto com todas letras, maiúsculas

Texto com letras minúsculas

Você poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos para complementar este tutorial, nesta página interativa.

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil