CSS - propriedade Background

Jun 9, 2008

Vamos estudar hoje a propriedade background do CSS. Abra um documento no bloco de notas do windows, ou um editor de textos simples ( não use o word pois li em alguns sites que não funciona) e salve seu documento como estilo.css. Este documento é o nossa folha de estilo que vamos inserir as formatações para nossa pagina Html como vimos na ultima aula.

A propriedade background define a cor de fundo de um elemento, uma imagem para fundo e ainda se essa imagem será ou não repetida horizontalmente ou verticalmente.

Para linkar sua página HTML na página CSS basta digitar o seguinte código no cabeçário (Head) da página HTML:

<html>
<head>
<title>Meu documento</title>
<link rel=”stylesheet” type=”text/css” href = ” style / estilo. css” />
</head>
<body>

Background-color

A cor de fundo em uma página é definida pela seguinte sitaxe:

background-color:propriedade

onde propriedade é igual a :

#FFFFFF	Código hexadecimal da cor
rgb(255,235,0)	Código rgb
Red , blue, green	Nome da cor
Transparent	Tranparente

È mais comum se utilizar o código hexadecimal das cores A tabela de cores em hexadecimal você pode ver neste site. Ao colocar na página basta digitar o código:

body {

background-color:#6AAD6A

}

e executar a página em html que a cor de fundo entrará automáticamente.

Background-image

Se você quiser por uma imagem de fundo a sintaxe é :

background-image: url (”caminho da imagem”);

Como no exemplo abaixo:

body {
background-image: url(”/images/tecs2.png”)
}

Background-repeat

Usa-se para repetir ou não a imagem na tela de fundo. A sintaxe é :

background-repeat: propriedade;

onde propriedade é igual a :

repeat	repete a imagem por toda tela de fundo
repeat-y	repete a imagem verticalmente
repeat-x	repete a imagem horizontalmente
no-repeat	não repete a imagem

Exemplo:

body {
background-image: url(”/images/tecs2.png”);
background-repeat: repeat-x;
}

Background-attachment

A propriedade background-attachment faz com que a imagem fique fixa na tela ou acompanhe a página conforme a barra de rolagem do navegador é utilizada.A sintaxe é:

background-attachment: propriedade;

onde a propriedade é igual:

fixed	fixa a imagem na página
	a imagem acompanha a barra de rolagem

Exemplo:

body{
background-image:url”/images/tecs2.png”);background-repeat: no-repeat;

background-attachment: fixed;

}

Background-position

A propriedade position da função background faz com que posicionemos esta imagem de fundo na página.Sua sintaxe é : background-position: propriedade onde propriedade é igual :

x-pos y-pos	coordenadas da posição
x-% y-%	coordenada da posição na tela em porcentagem
top left	imagem fica no topo a esquerda
top right	a imagem fica no topo a direita
top center	a imagem fica no topo no centro da página
center left	a imagem fica no meio da página a esquerda
center center	a imagem fica no meio da página no centro
center right	a imagem fica no meio da página a direita
bottom left	a imagem fica na esquerda no botton
botton center	a imagem fica no centro no botton
botton right	a imagen fica na direita no botton

Exemplo;

body {

background-image: url(”/images/tecs2.png”);

background-repeat: no-repeat;

background-position: 200px 70px;

}

Utilizar todas a propriedades em uma única declaração.

Para se utilizar todas as propriedades deve se seguir a seguinte sitaxe:

background: color image repeat attachment position;

em qualquer ordem podendo omitir uma ou mais propriedades. Veja o exemplo:

body {background: #00FF00 url(”tecs2.png”)

no-repeat fixed 200px 70px;

}

Com o tempo vamos explorar mais a propriedade background. Pratique estas propriedades para se ambientar bem com elas pois são muito úteis.

Espero que tenham gostado !

Obrigado !

Refêrencias:

http://www.w3schools.com/css/

http://www.maujor.com/tutorial/backtut.php

http://www.pt-br.html.net/tutorials/css/lesson3.asp

No Comments

Add new tag, CSS, programação, web2.0

CSS - Como funciona e como aplicar em um documento HTML

May 25, 2008

CSS, Web 2.0

Fazer o uso de CSS em um documento HTML de inicio não é dificil. Existem 3 maneiras principais:

1- Utilizando o atributo style do HTML

<html>
<head>
<title>Exemplo</title>
</head>
<body style=”background-color: #FF0000;”>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>

2 - Uso da tag style no HTML

<html>
<head><title>Exemplo</title>
<style type=”text/css”>
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>

3 - O método externo no qual se linka uma página HTML para uma folha de estilos externa. Cria-se uma folha de estilo com a extensão .css e utiliza a propriedade link do HTML para ele “puxar” as propriedades da folha de estilo. O link é feito no reader do código HTML (entre as tags <head> e </head>)

<html>
<head>
<title>Meu documento</title>
<link rel=”stylesheet” type=”text/css” href = ” style / style . css” />
</head>
<body>

Utilizaremos este ultimo método para aprendermos.

Depois de criada, você pode aplicar o CSS em quantas páginas quiser que elas manterão o mesmo lay - out.

A sintaxe da CSS

A sintaxe CSS é bem simples:

seletor {

propriedade: valor;

}

O Seletor é em qual tag HTML a CSS será aplicada; a propriedade é as propeiedades da página como fonte, cor de fundo, e outras; e o valor é o valor da propriedade. No caso da cor de fundo é o numero hexadecimal da cor, no caso da fonte é o tipo de fonte utilizada.