Conhecendo o CSS - Fixando e Rolando imagens de fundo

Você pode ter uma imagem de fundo fixa na tela de seu navegador ou permitir que ela role com o documento. Isso é feito usando-se a propriedade background-attachment com um dos seguintes valores: fixed ou scroll.
Normalmente, este comando é usado tanto para o corpo inteiro como para áreas de conteúdo dentro do documento. No entanto, como você viu até agora, você pode usá-lo em qualquer elemento que faz sentido fazê-lo.
Ex.:
body {
           background-image: url(head.gif);
           background-position: right;
           background-repeat: no-repeat;
           background-attachment: scroll;
         }

Ver mais

Conhecendo o CSS - Posicionando a imagem de Fundo

Você pode posicionar uma imagem de fundo no documento ou qualquer elemento que quiser. Primeiramente deve-se definir as propriedades background-repeat com o valor no-repeat. Então você pode posicionar usando qualquer um dos valores descritos na tabela abaixo:

Obs.:Você pode combinar valores de porcentagem com os outros valores numéricos no background-position, com exceção de palavras. Assim pode-se ter valores como 80% 50px mas não como 100% left.
Se somente um valor de porcentagem ou comprimento for dado, ele será aplicado somente a posição horizontal, e a vertical ficará com seu valor padrão de 50%.

Exemplo:
h1 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: 0% 0%;
      }

h2 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: 100px 4px;
     }

h3 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: bottom right;
      }

Observe que nesse exemplo já ajustou-se não só a imagem, mas também o valor de norepeat para garantir que a posição da imagem de fundo e seus valores funcionem corretamente.

Ver mais

Conhecendo o CSS - Imagens ao longo do eixo vertical

O eixo vertical ou y, é usado para que a imagem se repita ao longo do eixo vertical usando a propriedade background-repeat com o valor de repeat-y:

body {
           background-image: url(imagem_que_você_quer_usar.jpg);
           background-repeat: repeat-y;
          }

Você também pode não querer repetir as imagens, então use o valor no-repeat:

body {
          background-image: url(imagem_que_você_quer_usar.jpg);
          background-repeat: no-repeat;
          }

Isto mostrará a imagem aparecendo no canto superior esquerdo uma vez, sem repetir. ;)

Ver mais

Conhecendo o CSS - Imagens ao longo do eixo horizontal

CSS lhe permite controlar a orientação e modo como a imagem irá se comportar. Isto é feito usando o background-repeat juntamente com o valor apropriado.

O eixo horizontal ou x, é usado para que a imagem se repita ao longo do eixo horizontal usando a propriedade: background-repeat com o valor de repeat-x.

body {
            background-image: url(imagem_que_você_quer_usar.jpg);

            background-repeat: repeat-x;
         }

Ver mais

Conhecendo o CSS - Juntar imagem ao fundo

Você pode anexar em um documento uma imagem de fundo ou qualquer elemento.
Existem outras maneiras de controlar fundos com CSS, dando-lhe um vasto de opções quando se trata de aplicar design visual ao seu site. Ao combinar uma página com elementos de fundo você pode criar múltiplas camadas de imagens e efeitos especiais.

Primeiro, vamos ter que anexar a imagem de fundo ao documento. Isto é feito selecionando o corpo e criando uma regra usando a background-image com o valor da imagem do local e o nome:

body {background-image: url(imagem_que_você_que_utilizar.jpg);}

Obs.:
As imagens em um fundo ficam ladrilhadas (repetidas) o que é um comportamento normal para o navegador. Com HTML, você não tem nenhum controle sobre como uma imagem será mostrada.
Porém, existe algumas formas de fazer com que ela não se repita.

Você também pode adicionar imagens a elementos. Se você quiser esta imagem
para aparecer no fundo de todas as suas posições, você poderia criar a seguinte regra:
H1, h2, h3, h4, h5, h6 (background-image: URL (imagem_que_você_que_utilizar.jpg);)

Ver mais

Conhecendo o CSS - Cor e fundo dos elementos

Com o CSS, você pode adicionar cor para cada elemento de origem. Para isso, basta selecionar o elemento e criar uma regra. Farei isso para a <h1> para construir uma folha de estilo em nosso simples documento.

Exemplo abaixo:
body {background-color: #999;}
h1 {background-color: #ccc;}
p {background-color: #fff;}
a {background-color: #ccc;}

Bem legal né? Você pode adicionar uma cor de fundo em qualquer elemento!

Ver mais

Conhecendo o CSS - Adicionando cor de fundo

Adicionar cor de fundo é muito fácil e muito útil. Você pode adicionar à sua página
cor de fundo e qualquer elemento de fundo.

Adicionamos cor ao fundo do documento selecionando o elemento do corpo e
utilizando a propriedade e o valor de coloração.

Exemplo:
body {background-color: #FFCCFF;}

Nesse exemplo foi escolhido um fundo rosa claro para todo o corpo. Quando visto
em um browser, este transforma completamente a cor de fundo em rosa.

Obs.:
Você sempre deve definir uma cor para a página, mesmo se tiver a intenção de
usar gráficos e outros elementos de fundo em sua concepção. Isso ocorre porque as
cores são interpretadas rapidamente pelos navegadores que as renderizam bem antes
que qualquer gráfico, proporcionando uma experiência visual mais simples para os
visitantes. ;)

Ver mais

Conhecendo o CSS - Nome da cor

Você pode usar 17 nomes de cores para descrever cores. As cores são: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, e orange.

Ex.: {color: orange;}

Obs.: Na versão 3.0 do CSS, muitas cores foram adicionadas.

Ver mais

Conhecendo o CSS - Cores e Fundos (Porcentagens em RGB)

Você também pode usar porcentagens de vermelho, verde e azul. Em 0% o valor é
preto e em 100% o valor é branco. Observe o exemplo que se segue:

color: rgb(50%, 100%, 30%);

Nesse caso a cor aplicada será um verde brilhante.

Ver mais

Conhecendo o CSS - Cores e Fundos (Valores RGB)

Outro meio de representação de cor no CSS está em usar os próprios valores de
RGB. Estes podem ser encontrados em um programa como o Agave Free.

Clique em Agave para download.

Ver mais

Conhecendo o CSS - Cores e Fundos (Abreviações em HexaDecimais)

Abreviações em hexadecimal permite a você encurtar qualquer cor hexadecimal
que tenha valores pares. Isto significa que cada valor de RR, GG, BB têm de ser as
mesmas, tais como: #00CC33 ou #888888. Na abreviação em hexadecimal, você toma
um dígito de cada valor par, de modo que o resultado seria #0C3 e #888. Em um caso
como o do #808080, os valores não estão emparelhados, portanto você não pode fazer a
abreviação. Exemplo:

body {color: #FC9; background-color: #808080;}

a {color: #6C3;}


Obs.:
Você pode usar a abreviação hexadecimal em qualquer documento CSS, mas não em um conteúdo HTML.

Ver mais

Conhecendo o CSS - Cores e Fundos (Cores HexaDecimais)

Para usar bem as cores no CSS, você precisa saber das diversas maneiras que
uma cor pode ser definida. Embora uma cor possa ser aplicada usando qualquer número,
existe uma sequência de valores e opções que você precisa saber.



Hexadecimal (hex) é um sistema básico de 16 números, sendo muito útil em
computadores pois 8 bits (1 byte na memória) pode ser representado por um único
número ou letra. O sistema usa os números de 0 a 9 e as letras de a a f em qualquer
combinação de seis elementos (começando primeiro com #) para representar uma
correlação com o vermelho, verde e azul (#RRGGBB).

#FFFFFF = 255, 255, 255 = white

Qualquer combinação hexadecimal é permitida no HTML e CSS para representar
uma cor. Exemplo:

body {color: #000000; background-color: #FF99FF;}

a {color: #66CC33;}

Se você aplicar esses estilos a um documento, a cor de fundo seria rosa, o texto
cor preto, e no link a cor verde brilhante.

Ver mais

Conhecendo o CSS - Aplicando CSS a um documento HTML

Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir.

Interno (a tag style)


Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro das tags <head></head> do nosso código (x) HTML. Abaixo temos um exemplo:

<html>
<head>
<title></title>
<style type="text/css">
"Aqui você coloca o CSS"
</style>
</head>
<body>
</body>
</html>

Nesse método cada página (x) HTML terá seu respectivo código CSS para a formatação da página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no assunto.


Estilos In-line


Os estilos in-line são definidos ao longo do elemento (x)HTML que você
denominou: <p style="color: #ffffff;"> Esse parágrafo terá a cor branca</p>
As desvantagens de se usar estilos in-line é que você só poderá fazer alterações
nos elementos que você formatou.


Utilizando estilos externamente

O que muda aqui é que você criará um arquivo com a extensão .css e colocará em
seu (x) HTML uma chamada para esse arquivo. Ficando da seguinte forma:

<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />

Ou também utilizando o método @import:

<style type="text/css">@import url(nome_do_arquivo.css)</style>

O nosso código (x)HTML ficaria da seguinte forma:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />
</head>
<body>
</body>
</html>

Agora com @import:

<html>
<head>
<title></title>
<style type="text/css">@import url(nome_do_arquivo.css)</style>
</head>
<body>
</body>
</html>

A vantagem de se usar CSS externamente é que quando você precisar ou quiser
fazer algumas mudanças em seu site, basta fazer as alterações no arquivo CSS que é
ocorrida uma alteração global em todo o seu site.
Por exemplo, se você tem 100 páginas com um título <h2> em azul, caso queira
alterar a cor para rosa, é só alterar uma linha em seu arquivo CSS que todas as 100
páginas terão os títulos alterados. ;)

Ver mais

Conhecendo o CSS - A sintaxe básica

Suponha que desejamos uma cor de fundo branco para a página web:

Usando HTML podemos fazer assim:

<body bgcolor="#FFFFFF">

Com CSS o mesmo resultado será obtido assim:

body {

         background-color: #FFFFFF;

}

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:

Seletor {propriedade: valor;}

O seletor será a tag(s) HTML que será aplicada a uma propriedade. Na próxima folha, mostra uma tabela com as principais propriedades e valores do CSS.

Ver mais

Conhecendo o CSS - Introdução

Nas próximas postagens de CSS você verá como ele funciona e aprenderá a desenvolver 
sua própria folha de estilos. Conhecerá o básico e que código é necessário para usar CSS em um documento HTML.

Muitas das propriedades usadas em Cascading Style Sheets (CSS) se
assemelham àquelas utilizadas no HTML. Se você já está acostumado a usar HTML para
layout irá ter grande facilidade em muitos dos códigos que usaremos. 


Leia mais sobre CSS em: O que é CSS

Ver mais

O que é CSS

O Cascading Style Sheets (CSS) é uma folha de estilo composta por camadas. e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.

Por quê o CSS foi criado?

Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos também precisou ser aprimorada.

Foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a função de estruturar o conteúdo quanto de apresentá-lo para o usuário final. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas. Ou seja, as alterações teriam que ser feitas manualmente, uma a uma.

A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, permitiu um compartilhamento de formato e reduziu a repetição no conteúdo estrutural de uma página.

Com isto, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de uma página enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela. Isto é feito por meio da criação de um arquivo externo que contém todas as regras aplicadas e, com isto, é possível fazer alterações de estilo em todas as páginas de um site de forma fácil e rápida.

O CSS também permite que as mesmas marcações de uma página sejam apresentadas em diferentes estilos, conforme os métodos de renderização (como em uma tela, impressão, via voz, baseadas em dispositivos táteis, etc.). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS.

Por: http://www.tecmundo.com.br

Ver mais

O desabafo de um Web Designer

Ver mais

O desabafo de um Desenvolvedor Web

Ver mais