A propriedade color descreve a cor do primeiro plano (cor do texto) dos elementos. A especificação das cores é possível de várias formas diferentes. Normalmente, recorre-se a valores hexadecimais. Esses valores sempre começam com um jogo da velha (#). A seguir, geralmente, são utilizados três pares de números e/ou letras. Eles representam vermelho, verde e azul. As cores são sempre especificadas no seguinte padrão:
RRGGBB
A especificação #ffffff resulta numa cor branca. Por outro lado, se usar #000000, será exibida a cor preta. Em editores HTML "razoáveis", existem seletores de cores correspondentes.
Podem determinar os códigos hexadecimais sobre isso. Além disso, existem vários sites (por exemplo, http://www.farbtabelle.net/) com visões gerais correspondentes sobre cores.
No CSS, é possível encurtar a escrita de valores de cores hexadecimais. No entanto, este princípio não pode ser aplicado a todas as cores. Na realidade, isso só funciona quando um valor consiste em três pares iguais. Exemplos típicos disso são as definições de cor para preto e branco, que normalmente são anotadas da seguinte maneira:
.schwarz {
color: #000000;
}
.weiss {
color: #ffffff;
}
Essa sintaxe também pode ser encurtada.
.schwarz {
color: #000;
}
.weiss {
color: #fff;
}
No CSS, aliás, também são permitidos valores RGB. Aqui, deve-se indicar valores decimais de 0 a 255, separados por vírgulas. A ordem dos valores de cor corresponde à dos valores hexadecimais.
a {
color: rgb(100%, 100%, 100%);
background: rgb(0, 0, 0);
}
Como o exemplo mostra, são possíveis também apresentações percentuais, que na prática, no entanto, são relativamente raras.
Outra variante para definições de cor são palavras-chave de cor. Aqui estão alguns exemplos:
• black
• red
• blue
• yellow
• white
• green
Uma definição correspondente poderia ser da seguinte forma:
p {
color: white;
background: black;
}
Observem que com o CSS3 a paleta de palavras-chave de cores disponíveis foi significativamente expandida. O CSS3 adotou os nomes de cores da especificação SVG. Uma visão geral dos nomes de cores disponíveis pode ser encontrada em http://www.w3.org/TR/SVG/types.html#ColorKeywords.
Definir fundo
Com background, trata-se de uma síntese dos possíveis valores a seguir, que serão apresentados detalhadamente mais adiante neste tutorial:
• background-attachment
• background-color
• background-image
• background-position
• background-repeat
As diferentes especificações devem ser separadas por espaço. A ordem na qual elas são definidas não importa. Nem todos os valores precisam ser especificados.
Um exemplo:
p {
background: transparent
url(logo.jpg)
scroll repeat 0% 0%;
}Cores de fundo
Para atribuir uma cor de fundo a um elemento, é utilizada a propriedade background-color.
div {
background-color: #009999;
}
Como valor, especificamos a cor desejada.
Imagens de fundo
background-image define uma imagem como fundo. Se esta propriedade for definida num arquivo CSS externo, os caminhos relativos apontam para o diretório onde o arquivo CSS está localizado.
• não – nenhuma imagem de fundo
• URI – Caminho para a imagem
Aqui também um exemplo.
<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
Bem-vindo ao PSD-Tutorials.de!
</div>
No entanto, ao usar imagens de fundo, ajam com cuidado. Pois imagens de fundo muito chamativas não facilitam a leitura do texto.
Existem, naturalmente, sites nos quais apenas a estética importa. Aqui, certamente, pode-se trabalhar com planos de fundo mais chamativos.
Fundos rolantes
Em elementos mais longos, a imagem de fundo se move ao rolar a página. Com background-attachment, isso pode ser evitado.
• fixo – rola junto
• rolar – a imagem de fundo permanece parada e é ajustada à janela do navegador (viewport).
A propriedade background-attachment geralmente é usada em combinação com background-image.
Um exemplo:
div.fest {
background-image: url(background.gif);
background-repeat: no-repeat;
}A posição do plano de fundo
A propriedade background-repeat determina em que posição o plano de fundo deve começar. O ponto de referência é o elemento para o qual a imagem foi definida.
• Percentual - um ou dois valores que determinam a distância da imagem do canto superior esquerdo do elemento. Nos dois valores, o primeiro é para a distância horizontal e o segundo para a distância vertical. O ponto de referência não é o canto superior esquerdo da imagem, mas sim um ponto dentro da imagem, que também é especificado pelos valores x/y.
• Comprimento - determina a distância da imagem do seu canto superior esquerdo para o canto superior esquerdo do elemento. São permitidos um ou dois valores. Se forem fornecidos dois valores, o primeiro determina a distância horizontal e o segundo a distância vertical.
Além disso, também são possíveis as seguintes palavras-chave:
• left - alinhado à esquerda horizontalmente
• center - centrado
• right - alinhado à direita horizontalmente
• top - alinhado no topo verticalmente
• bottom - alinhado na parte inferior verticalmente
Aqui está um exemplo de como isso pode parecer:
p {
background-position: 8em top;
}Imagens de plano de fundo repetitivas
Se e como uma imagem de fundo é repetida se for menor que a área exibida, pode ser determinado com background-repeat.
• repeat - a imagem de fundo será repetida horizontal e verticalmente para preencher o elemento.
• repeat-x - a imagem é repetida apenas horizontalmente.
• repeat-y - a imagem é repetida apenas verticalmente.
• no-repeat - a imagem não será repetida.
Também aqui um exemplo:
body {
background-repeat: repeat-y;
}
Neste caso, a imagem será repetida apenas verticalmente.
Por outro lado, se usar repeat-y, a repetição será apenas horizontal.
Este tutorial mostrou o quão poderoso o CSS também é no campo das cores e imagens.
