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.783 ]

Por: Juliao Junior em 04/09/2009

0 0

Denuncie Favoritos Indicar Impressora

Aplicando estilo ao background

No primeiro artigo desta série vimos os conceitos principais sobre Folhas de Estilo em Cascata, as famosas CSS. Desta vez seremos mais específicos, tendo nossa atenção para exemplos práticos.

Aplicaremos estilo a alguns itens da página e o primeiro deles será o background. Se você não leu o primeiro artigo da série, acesse-o em CSS - Manual Básico Sobre Estilo.

Novamente, estaremos com uma tradução livre dos manuais da W3Schools. Se preferir ler o original, em inglês, siga o link W3Schools - CSS.

Quando falamos em background, normalmente você pode pensar no background da página web. No entanto o conceito aqui é mais genérico. Podemos trabalhar tanto com o background da página como especificar algum elemento, como um cabeçalho ou até mesmo um parágrafo. Vejamos como fazer isso.

As propriedades de background em CSS são usadas para definir efeitos no background de um elemento. Tais propriedades são indicadas por:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color

A propriedade background-color é usada para especificar a cor do background de um elemento. Mas isso é óbvio. :) A cor do background de uma página é definido pelo seletor "body":

body {background-color:#c2b1de}

Você pode indicar a cor do background das formas abaixo.

Nome - escreva o nome da cor, em inglês. Por exemplo, "blue"
RGB - um valor RGB, como "rgb(240,120,120)"
Hexagonal - um valor hexagonal, como "#ff0000"

No seguinte exemplo, os elementos h1, p, e div possuem cores diferentes de background:

h1 {background-color:#b5e144}

p {background-color:#cc6600}

div {background-color:#b4a4ce}

Se você desejar entender como indicar as cores usando os formatos RGB ou hexadecimal, leia a dica Entendendo as Cores Hexadecimais (RGB) aqui mesmo no Viva o Linux.

Background Image

A propriedade background-image indica uma imagem como sendo o background de um elemento. Funciona como a propriedade anterior, mas em vez de indicar uma cor ela indica uma imagem. Como padrão, a imagem é repetida até preencher o elemento inteiro.

Use uma sintaxe como indicada abaixo:

body {background-image:url("<imagem.extensão>)}

Se for usar essa propriedade, tome muito cuidado. Uma imagem como fundo pode dificultar bastante a leitura dos elementos que estão sobre ele. Principalmente se houver texto sobre a imagem. A sugestão é: se for preciso, ou interessante, o uso de imagem como fundo, então teste bem antes de publicar a página.

Note que o padrão é repetir a imagem tanto horizontal quanto verticalmente. Mas algumas imagens ficam estranhas assim. Por isso é possível repetir apenas horizontalmente (verticalmente). Para repetir apenas na horizontal (vertical) use a opção "repeat-x" (repeat-y), conforme o exemplo abaixo.

body {
background-image:url("imagemDeFundo.png");
background-repeat:repeat-x;
}

Também é possível mostrar uma imagem como background uma única vez. Para isso, siga a seguinte sintaxe:

body
{
background-image:url("<imagemDeFundo.png>");
background-repeat:no-repeat;
}

No caso acima a imagem é mostrada como fundo no mesmo lugar do texto dos demais elementos. É claro que possivelmente desejaremos mudar a posição da imagem no caso do elemento em questão ser um texto, de forma que não impeça a facilidade de leitura do texto.

Para especificar a posição da imagem, use a propriedade "background-position":

body
{
   background-image:url("<imagemDeFundo.png>");
   background-repeat:no-repeat;
   background-position:top right;
}

Valores adicionais para se usar com a propriedade "background-position" são:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Outro característica muito interessante é o uso da propriedade "background-attachment". Com ela podemos indicar se uma imagem de fundo será fixa ou rolará junto com a página. Por exemplo, se queremos ter uma imagem como fundo de nossa página, com o texto sendo rolado enquanto a imagem fica fixa, podemos usar a sintaxe abaixo.

<html>
<head>
<style type="text/css">
body
{
   background-image:url("imagemDeFundo.gif");
   background-repeat:no-repeat;
   background-attachment:fixed
}
</style>
</head>

<body>

<restanteDaPagina>
...

</body>
</html>

É claro que podemos usar as várias propriedades que vimos acima em um mesmo elemento. Por exemplo, podemos usar a configuração abaixo.

body {background:#c2b1de url("<imagemDeFundo.png>") no-repeat top right}

Aqui há algo importante a notar. Podemos usar as várias propriedades juntas, inclusive sem a obrigação de usar todas elas. Ou seja, juntamos as propriedades que desejamos. Mas é preciso usar em uma ordem precisa. Note bem: se for usar várias propriedades, declarando todas juntas, escreva seguindo a ordem abaixo.