CSS - Manual de Estilo (parte 2)

juliaojunior

Neste segundo artigo veremos como aplicar estilo ao plano de fundo de elementos, aplicar estilo aos textos e também entender o que é o Modelo da Caixa e como utilizá-lo para deixar nossas páginas web mais estilosas.

[ Hits: 25.383 ]

Por: Juliao Junior em 04/09/2009

0 0

Denuncie Favoritos Indicar Impressora

Estilos em textos

Agora vamos falar sobre aplicação de estilos a textos. Vamos começar com as cores.

Propriedade "Text Color"

A propriedade "color" é usada para indicar a cor do texto. A cor pode ser especificada da mesma forma que fizemos com a propriedade "background". Ou seja, usamos o nome da cor, os códigos RGB ou hexadecimal. Por exemplo, poderíamos usar "red", "rgb(255,0,0)" ou "#ff0000" e teremos o mesmo efeito. Veja um exemplo:

body {color:green}
h1 {color:#ff0000}
h2 {color:rgb(0,0,255)}

Propriedade "Text Alignment"

A propriedade "text-align" será usada para indicar qual o alinhamento horizontal do texto: se o texto deve ser mostrado centralizado, alinhado à esquerda ou direita, ou ainda se será justificado. Quando usarmos essa propriedade com o valor "justify", cada linha terá o mesmo comprimento, de forma que as margens direita e esquerda fiquem alinhadas (como em jornais e revistas).

Um exemplo do uso pode ser visto abaixo.

h1 {text-align:center}
p.date {text-align:right}
p.main {text-align:justify}

Propriedade "Text Transformation"

Esta propriedade serve para indicarmos se o texto deve ser em minúsculas ou maiúsculas, ou se o texto terá a primeira letra de cada palavra capitalizada. Novamente, um exemplo abaixo.

p.uppercase {text-transform:uppercase}
p.lowercase {text-transform:lowercase}
p.capitalize {text-transform:capitalize}

Propriedade "Text Indentation"

Esta propriedade é usada para especificar a indentação da primeira linha do texto. Podemos especificar a distância do início da linha até a primeira letra. Siga o exemplo abaixo.

p {text-indent:45px}

Na verdade as manipulações de estilos de texto nos dá grande liberdade. Veja abaixo alguns exemplos, usando outras propriedades.

Distância entre caracteres:

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

Distância entre linhas:

p.small {line-height: 90%}
p.big {line-height: 200%}

Página anterior Próxima página

Páginas do artigo

   1. Aplicando estilo ao background
   2. Estilos em textos
   3. Fontes
   4. Modelo da Caixa

Outros artigos deste autor

Guia Introdutório do Linux III

Processing - Interagindo com o usuário

Processador - Tipos e características

Blender - Iniciante (parte 1)

Python, o curso (parte 1)