aula de CSS Nº2 - Backgrounds

por **prizm** Sáb Jul 23, 2011 2:33 pm

Nesta aula vai aprender as propriedades CSS que dizem respeito a cores e backgrounds.

Propriedades a aprender nesta aula:

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

-color-

A propriedade color serve para mudar a cor de 1º plano de um elemento:

h1{color: #00ff00;}

EXEMPLO AQUI

-background-color-

A propriedade background-color serve para mudar a cor de fundo de um elemento:

h1{background-color: #0000ff;}

EXEMPLO AQUI

-background-image-

A propriedade background-image serve para colocar uma imagem como fundo de um elemento:

body{background-image:url("http://skyje.com/wp-content/uploads/2010/07/css.gif");}

EXEMPLO AQUI

-background-repeat-

A propriedade background-repeat serve para definir como se repete a imagem de fundo de um elemento.

Possíveis formas:

CÓDIGO	DESCRIÇÃO	EXEMPLO
background-repeat: repeat-x;	a imagem repete-se na horizontal	EXEMPLO AQUI
background-repeat: repeat-y;	a imagem repete-se na vertical	EXEMPLO AQUI
background-repeat: repeat;	a imagem repete-se em todos os sentidos	EXEMPLO AQUI
background-repeat: no-repeat	a imagem não se repete	EXEMPLO AQUI

-background-attachment-

A propriedade background-attachment serve definir se a imagem de fundo anda com o ecrã ou não:

CÓDIGO	DESCRIÇÃO	EXEMPLO
background-attachment: fixed	a imagem anda com o ecrã	EXEMPLO AQUI
background-attachment: scroll	a imagem não anda com o ecrã	EXEMPLO AQUI

-background-position-

Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. A propriedade background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar na tela.

Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador. As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right

h1{background-position: top right;}

EXEMPLO AQUI

-compilar background-

E podemos abreviar tudo isto com o seguinte código:

background: background-color background-image background-repeat background-attachment background-position;

E chegámos ao fim desta aula peço desculpa se estiver muito confuso Razz

na proxima aula falaremos de fontes.