Propriedades de texto
As propriedades de texto definem como um texto será aplicado. Os elementos são:
- Endentação
- Alinhamento
- Espaçamento
- Caixa alta e baixa
- Espaçamentos entre linhas
Endentação
Text-indent
- Esta propriedade define a tabulação de um texto e seus valores podem ser dados em diversas unidades de medida. O valor pode ser negativo, mas deve obedecer aos limites impostos por cada browser.
Exemplo:
<html> <head> <title>Definindo indentação</title> <style type="text/css"> <!-- .pixel {text-indent: 24px;} .pontos {text-indent: 24pt;} --> </style> </head> <body> <p class="pixel">Neste parágrafo é utilizada a propriedade text-indent</p> <p class="pontos">Neste parágrafo é utilizada a propriedade text-indent</p> </body> </html>
Exemplo da propriedade text-indent
Alinhamento
Text-align
- Esta propriedade define o alinhamento do texto.
Exemplo:
<html> <head> <title>Definindo Alinhamento</title> <style type="text/css"> <!-- .centro {text-align: center;} .direita {text-align:right;} --> </style> </head> <body> <p class="centro">Neste parágrafo é utilida a propriedade text- align</p> <p class="direita">Neste parágrafo é utilizada a propriedade text- align</p> </body> </html>
Exemplo da propriedade text-align
Espaçamento
Letter-spacing
- Esta propriedade define espaçamento entre as letras.
Exemplo:
<html> <head> <title>Definindo Espaçamento</title> <style type="text/css"> <!-- .palavra {letter-spacing: 10px;} --> </style> </head> <body> <p class="palavra">People</p> </body> </html>
Exemplo da propriedade letter-spacing
Caixa alta e baixa
Text-transform
- Esta propriedade define a caixa dos caracteres de um trecho de texto. O texto pode ficar em maiúsculo, minúsculo ou com a primeira letra de cada palavra em maiúscula.
Seus valores-chave são:
- uppercase - todas as letras do texto serão em maiúsculas.;
- lowercase - todas as letras do texto serão em minúsculas.;
- capitalize - a primeira letra de cada palavra estará em maiúscula;
- none - nenhum.
Exemplo:
<html> <head> <title>Definindo caixa</title> <style type="text/css"> <!-- .capitais {text-transform: capitalize;} .maiusculas {text-transform: uppercase;} --> </style> </head> <body> <p class="capitais"> Testando uma propriedade</p> <p class="maiusculas"> Testando uma propriedade</p> </body> </html>
Exemplo da propriedade text-transform
Espaçamentos entre linhas
Line-height
- Esta propriedade define o espaçamento entre linhas de um parágrafo.
Exemplo:
<html> <head> <title>Definindo Espaço entre as linhas</title> <style type="text/css"> <!-- h2 {line-height: 30pt} --> </style> <body> <h2>Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas </h2> </body> </html>
Exemplo da propriedade line-height
Nenhum comentário:
Postar um comentário