


Copyright © 2007 by Noble7fix · All Rights reserved · E-Mail: noble7fix@gmail.com


A Formatação/estilização de textos : é uma ferramenta essencial que pode determinar o interesse ou não dos visitantes do seu site. Para além da qualidade do conteúdo, a forma de apresentar os textos , é evidente, que será fundamental para manter o interesse do visitante.

<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,0)}
</style>
</head>
<body>
<h1>O meu site</h1>
<h2>O melhor site</h2>
<p>O meu site é o melhor do mundo</p>
</body>
</html>
1º - text-indent: permite/determina recuo do texto.
2º - text-align: Alinhamento do texto, à esquerda, direita, centro e justificado
3º - text-decoration : Colocar sublinhado, corte com uma linha, colocar uma linha sobre o texto
4º - letter-spacing : determina o espaço entre as letras de uma palavra.
5º - word-spacing : determina o espaço entre as palavra de um texto.
6º - text-transform : determina as maíusculas ou minusculas.
As propriedades que se podem aplicar ao Texto são:
1º - text-indent: permite/determina recuo do texto

<html>
<head>
<style type="text/css">
p {text-indent: 3cm}
</style>
</head>
<body>
<p>
Para saber como ganhar dinheiro com o seu website ou simplesmente o divulgar, depois de o criar consulte o site: http://ganhar.noble7fix.com.
</p>
</body>
</html>
p {text-indent: 30px;}
2º - text-align: Alinhamento do texto, à esquerda, direita, centro e justificado

<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>O meu site</h1>
<h2>O melhor site</h2>
<h3>O meu site é o melhor</h3>
</body>
</html>

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</style>
</head>
<body>
<h1>O meu site</h1>
<h2>O melhor site</h2>
<h3>O meu site é o melhor do mundo</h3>
<p><a href="http://ganhar.noble7fix.com">Este é um link para Trafego Dinheiro. Aprenda como ganhar com o seu Site.</a></p>
</body>
</html>
3º - text-decoration : Colocar sublinhado, corte com uma linha, colocar uma linha sobre o texto

O meu site

Para saber como ganhar dinheiro com o seu website ou simplesmente o divulgar, depois de o criar consulte o site: http://ganhar.noble7fix.com.
O melhor site
O meu site é o melhor

_________
O meu site
O melhor site
O meu site é o melhor
4º - letter-spacing : determina o espaço entre as letras de uma palavra.

<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>O meu site</h1>
<h4>Um maravilhoso site</h4>
</body>
</html>
O meu site
Um maravilhoso site
5º - word-spacing : determina o espaço entre as palavras.

Para saber como ganhar dinheiro com o seu website consulte o site: http://ganhar.noble7fix.com.

O meu site
O melhor site
O meu site é o melhor do mundo
6º - text-transform : determina as maíusculas ou minusculas.

Este é mais um exercicio, um exemplo que para além da formatação do texto pode atribuir côr e tudo o mais que aprendemos em dicas anteriores.
Como pode observar claramente a propriedade text-indent vai determinar um recuo da primeira linha do parágrafo que neste caso é p {text-indent: 3cm}. pode substituir os cm por px.
A propriedade text-align permite alinhar à esquerda (left), à direita (right) ou no centro (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita.
<html>
<head>
<style type="text/css">
p
{
word-spacing: 30px
}
</style>
</head>
<body>
<p>
Para saber como ganhar dinheiro com o seu website consulte o site: http://ganhar.noble7fix.com.
</p>
</body>
</html>
capitalize
A primeira letra de cada palavra é convertida para maiuscula, exemplo: "o meu site" para "O meu site".
uppercase
Converte todas as letras para maiúscula, exemplo: "o meu site" para "O MEU SITE".
lowercase
Converte todas as letras para minúscula, exemplo: "O MEU SITE" para "o meu site".
none
Sem qualquer transformação.

<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<p class="uppercase">este texto vai aparecer em letra maiuscula</p>
<p class="lowercase">ESTE TEXTO VAI APARECER EM LETRA MINUSCULA</p>
<p class="capitalize">neste texto a primeira letra de cada palavra vai aparecer em maiuscula</p>
</body>
</html>
ESTE TEXTO VAI APARECER EM LETRA MAIUSCULA
este texto vai aparecer em letra minuscula
Neste Texto A Primeira Letra De Cada Palavra Vai Aparecer Em Maiuscula