Como construir Tráfego para o teu Site,
Ganhe dinheiro com o seu site.
Guia e dicas, experimente:
http://ganhar.noble7fix.com
Guia Prático CSS
Lição 7 - Formatação | Estilização Textos
Construir um Website
AddThis Social Bookmark Button

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

Este é um link para Trafego Dinheiro. Aprenda como ganhar com o seu Site.

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