CSS – Definindo Cores e Background usando CSS

CSS | Paulo Castro | março 13, 2010 at 5:38 PM

Com as propriedades de cores, podemos controlar as cores de várias partes da página, do texto, do fundo da página e de elementos HTML. Além disso, podemos aplicar imagens de fundo (background) em qualquer elemento, não só no elemento BODY como já se faz em HTML.

As cores definidas em CSS, assim como em HTML, podem ser especificadas por um número em hexadecimal (representando um código RGB) ou por um nome. Além dessas duas formas, podem ainda ser especificadas por três números decimais, representando também o código RGB da cor.

Os códigos RGB informam a quantidade de luz vermelha, verde e azul que compõe a cor, respectivamente. Cada cor pode ter 16 níveis de intensidade: 0 a 256 (00 a FF, em hexade-cimal). O total de combinações possíveis é de 16.777.216 cores.

A exibição correta das cores depende da capacidade do vídeo onde serão vistas. Poucos sistemas têm capacidade de mostrar mais que 65.536 cores simultâneas. A maioria só mostra 256.

Color
Background-color
Background-image
Background-repeat
Background-position e Background-attachment
Background
A tabela abaixo relaciona em negrito os 16 nomes padrão, suportados por todos os browsers que exibem cores, e seus respectivos códigos RGB em hexadecimal e decimal.
Estas lista-das são as únicas que fazem parte da especificação oficial do HTML 4. São todas “seguras”, ou seja, fazem parte da paleta básica de 216 cores.

Color

Define a cor do texto. A propriedade color substitui totalmente o descritor <FONT COLOR> com vantagens. Pode ser aplicada localmente em um descritor (usando o atributo style) ou globalmente na página e no site, como qualquer outra propriedade de estilo.

A sintaxe da propriedade color é:

color: nome_de_cor
color: #número_hexadecimal
color: rgb(vermelho, verde, azul)

Exemplos:

H1 { color: green }
P { color: #fe0da4 }
EM { color: rgb (255, 127, 63) }
<EM STYLE=”color: rgb (100%, 50%, 25%)”>

Os nomes são qualquer nome válido de cor. Se o browser não encontrar o nome ao qual o estilo se refere, deve exibir a cor default (ou herdada). O símbolo “#” é opcional no código hexadecimal. A intensidade da cor pode ser expressa em valores absolutos (0 a 255) ou percen-tagens (0.0-100.0%).

Background-color

As cores de fundo de qualquer elemento podem ser alteradas através da propriedade background-color.

A sintaxe é:

background-color: transparent (valor default)
background-color: nome_de_cor
background-color: #número_hexadecimal
background-color: rgb(vermelho, verde, azul)

Exemplos:

H1 { background-color: green }
P { background-color: #fe0da4 }
EM { background-color: rgb (255, 127, 63) }
<EM STYLE=”background-color: rgb (100%, 50%, 25%)”>

O fundo transparente simplesmente deixa à mostra o fundo do objeto que o contém. O fundo, para texto, ocupa todo o espaço da fonte (inclusive espaço em branco acima e abaixo que fazem parte da fonte). A cor não é estendida quando o espaçamento entre linhas é aumen-tado em alguns browsers.

Background-image

Com background-image é possível atribuir a qualquer elemento HTML uma imagem que será exibida no fundo, assim como as cores de fundo.

A sintaxe é:

background-image: none (valor default)
background-image: url(URL_da_imagem)

Exemplos:

H1 { background-image: url(http://www.xyz.com/abc.jpg) }
B {background-image: url(../monstro.gif) navy …

As URLs são relativas à localização do arquivo que contém a folha de estilos (pode ser a própria página ou não). A cor de backup é usada para ‘vazar’ pelas partes transparentes da ima-gem ou prevenir contra o não carregamento do fundo (para permitir a leitura em fundo escuro pode-se usar preto como cor de backup de uma imagem escura).

Background-repeat

CSS permite mais controle ainda sobre a imagem de fundo, facilitando a maneira como a mesma irá se repetir. A propriedade é background-repeat.

Sintaxe:

background-repeat: repeat (default)
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat

Exemplos:

BODY {background-image: url(china.jpg);
background-repeat: repeat-x }
TABLE{background-image: url(corinthians.gif)
background-repeat: no-repeat }

O valor repeat é default e faz com que a imagem ocupe toda a tela. repeat-x faz com que a imagem seja repetida apenas horizontalmente e repeat-y faz com que ela seja repetida apenas verticalmente. no-repeat faz com que a imagem não seja repetida de forma alguma (aparecerá uma imagem apenas no canto superior esquerdo).
Para fazer a imagem aparecer em outros lugares, pode-se usar as propriedades de posi-cionamento do fundo da tela.

Background-position e Background-attachment

O posicionamento e a forma de exibição do papel de parede são controlados pelas pro-priedades background-attachment e background-position. A primeira define se o fundo

irá ou não se mover com o texto ou ficar fixo na tela. A segunda permite o posicionamento do fundo em um local exato da tela. Infelizmente essas duas propriedades não têm suporte uni-versal pelos browsers comerciais (apenas o Internet Explorer os suporta).

Sintaxe:

background-attachment: fixed
background-attachment: scroll

Exemplo:

BODY {background-image: url (china.jpg);
background-attachment: fixed }

Sintaxe:

background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posição_vertical posição_horizontal

Exemplos:

BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: 50% 100% }

BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: 25pt 2.5cm }

BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: center top }

BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: left bottom }

Os valores de porcentagem são relativos à posição do elemento sobre o qual se aplica o estilo. As posições são sempre dadas em pares, tendo os valores separados por espaços. O primeiro valor é sempre um valor horizontal e o segundo um valor vertical. O browser coloca o bloco afetado dentro de uma “caixa invisível” e a posiciona de acordo com as porcentagens. Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta “caixa invi-sível” contra a margem direita do browser.

Os valores de comprimento, assim como os de porcentagem também são dados em pa-res. O primeiro é a distância da margem horizontal a partir do canto superior esquerdo do ob-jeto; o segundo é a distância da margem superior. As unidades válidas são as mesmas usadas em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par.

Os valores de posição são palavras-chave usadas também aos pares. São equivalentes das porcentagens básicas de alinhamento. O primeiro par pode ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%), bottom (100%) ou center (50%).

Background

A propriedade background pode ser usada para definir várias características de fundo de uma única vez. Na sintaxe abaixo, a ordem dos fatores é importante.

A sua sintaxe é: