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:
- 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:
- 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>
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 ... A cor do texto
<html>
<head>
<style type="text/css">
<!--
h1 {color: #FF0000;}
h2 {color: #00FF00;}
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...O 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 cabeçalho
Este é o paragráfo
word-spacing...O 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 cabeçalho
Este é o paragráfo
text-align...Alinhar o 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 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>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>Texto com recuo de 80 pixeis
Texto com recuo de 3.0em
text-transform...Forma das letras 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>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
0 comentários:
Postar um comentário
Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).