Técnicas em Informática

Introdução
CSS é uma linguagem de estilos que define o layout de documentos HTML

Folhas de estilos em cascata — Cascading Style Sheets (CSS) — é uma ferramenta fantástica para construção do layout dos seus websites. Permite que você projete websites com uma técnica completamente diferente da convencional e possibilita uma considerável redução de tempo de trabalho. Conhecer CSS é uma necessidade para qualquer um envolvido com o projeto web.
Este tutorial iniciará você nas CSS em algumas poucas horas. É fácil de entender e ensinará a você todas as técnicas sofisticadas.
Aprender CSS é divertido. À medida em que você for progredindo no tututorial não esqueça de dedicar algum tempo para fazer seus experimentos com o que for aprendendo em cada lição.
Para usar CSS é necessário um conhecimento básico de HTML. Se você não está familiarizado com HTML, consulte nosso tutorial HTML antes de começar com CSS.

O que é:

CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata

A sintaxe básica das CSS

Suponha que desejamos uma cor de fundo vermelha para a página web:
Usando HTML podemos fazer assim:

 
 <body bgcolor="#FF0000">

Com CSS o mesmo resultado será obtido assim:

 
 body {background-color: #FF0000;}

Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS:
Cores e fundos
Nesta lição você aprenderá como aplicar cores de primeiro plano e cores de fundo no seu website. Abordaremos ainda os métodos avançados de controle e posicionamento de imagens de fundo. Serão explicadas as seguintes propriedades CSS:

Cor do primeiro plano: a propriedade 'color'

A propriedade color define a cor do primeiro plano de um elemento.
Considere, por exemplo, que desejamos que todos os cabeçalhos de primeiro nível no documento sejam na cor vermelha. O elemento HTML que marca tais cabeçalhos é o elemento <h1>. O código a seguir define todos os <h1> na cor vermelha.

 
 h1 {
  color: #ff0000;
 }

Ver exemplo

As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima (#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb (rgb(255,0,0)).

A propriedade 'background-color'

A propriedade background-color define a cor do fundo de um elemento.
O elemento <body> contém todo o conteúdo de um documento HTML. Assim, para mudar a cor de fundo da página, devemos aplicar a propriedade background-color ao elemento <body>.
Você pode aplicar cores de fundo para outros elementos, inclusive para cabeçalhos e textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos <body> e <h1>.

 
 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;

 }

Ver exemplo

Notar que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vírgula.

Images de fundo [background-image]

A propriedade CSS background-image é usada para definir uma imagem de fundo.
Usaremos a imagem de uma borboleta para exemplificar a aplicação de imagens de fundo. Você pode fazer o download da imagem mostrada abaixo e usá-la nos seus experimentos (clique com o botão direito do mouse sobre a imagem e escolha "salvar imagem como") ou você poderá usar uma outra imagem qualquer ao seu gosto.

Para inserir uma imagem de fundo na página basta aplicar a propriedade background-image ao elemento <body> e especificar o caminho para onde está gravada a imagem.

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

Ver exemplo

NB: Notar como foi especificado o caminho para a imagem usando url("butterfly.gif"). Isto significa que a imagem está localizada no mesmo diretório da folha de estilos. Pode ser escolhido um outro diretório para gravar as imagens e o caminho seria url("../images/butterfly.gif") ou até mesmo hospedá-la na Internet: url("http://www.html.net/butterfly.gif").

Imagem de fundo repetida [background-repeat]

No exemplo anterior você observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.
A tabela a seguir mostra os quatro diferentes valores para background-repeat.

Value	Description	Example
`Background-repeat: repeat-x`	A imagem se repete na horizontal	Ver exemplo
`background-repeat: repeat-y`	A imagem se repete na vertical	Ver exemplo
`background-repeat: repeat`	A imagem se repete na tanto na horizontal como na vertical	Ver exemplo
`background-repeat: no-repeat`	A imagem não se repete	Ver exemplo

Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

Ver exemplo

Image de fundo fixa [background-attachment]

A propriedade background-attachment define se a imagem será fixa ou se irá rolar juntamente com o elemento que a contém.
Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela.
A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja os exemplos para constatar a diferença entre imagem fixa e imegem que rola.

Value	Description	Example
`Background-attachment: scroll`	A imagem rola com a página	Ver exemplo
`Background-attachment: fixed`	A imagem é fixa	Ver exemplo

Por exemplo, o código abaixo fixa a imagem na tela.

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

Esses elementos são muito bem utilizados principalmente quando iremos criar paginas contendo cabeçalhos com ferramentas como o word quando fazemos um trabalhoo ele sempre a uma pagina salva como uma cascata.
Rafaela.