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: 23.865 ]

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

Convença outros a usar Linux!

Reconstructor: Crie seu próprio Linux liveCD

Grace - Gráficos em ciência

Inkscape - Introdução (parte 1)

Grace - Alterando e gerando gráficos usando "fitting"