quinta-feira, 3 de janeiro de 2013

PROPRIEDADES CSS - TEXT



Propriedades 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 <br>
 Exemplos:


1- Espaçamento nas Letras letter-spacing
2- Espaçamento nas Palavras word-spacing
 
<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>
 
<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>
3- Alinhamento do Texto text-align
4- Decoração do Texto text-decoration
 
<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>

 
<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="#">

Este é um link sem sublinhado</a>
</p>
</body>
</html>
5- Recuo do Texto text-indent
6- Forma das Letras text-transform
 
<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>
 
<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>
Postado por Web Code Free às 00:45
Marcadores:

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)