:: Definindo cores em uma regra CSS ::
Objetivo
Detalhar as diferentes maneiras de se escrever a sintaxe para os valores das cores em uma regra CSS
Valores válidos para cores em CSS
Observe as regras de estilo a seguir:
1-) div.um {background-color: #FF0000;}
2-) div.dois {background-color: #F00;}
3-) div.tres {background-color: rgb(255, 0, 0);}
4-) div.quatro {background-color: rgb(100%, 0%, 0%);}
5-) div.cinco {background-color: red;}
6-) div.seis {background-color: ThreeDShadow;} Como você já deve ter concluido apresentei 06 (seis) maneiras diferentes de definir uma cor de fundo para uma DIV .
E, se considerarmos que para as duas primeiras regras é válido usar letras minúsculas, existem 08 (oito) maneiras de se definir uma cor em uma regra CSS.
As maneiras mais usadas são as mostradas em 1 e em 2, ou seja, com uso do código hexadecimal de cores.
O efeito das regras no navegador
Observe agora no screenshot a seguir como estas seis DIV's serão renderizadas.
As cinco primeiras estão com a mesma cor de fundo, vermelha o que nos leva a concluir que as cinco primeiras regras mostradas são equivalentes, ou seja são cinco maneiras diferentes de definir um mesmo valor para uma cor.
A sexta cor, ThreeDShadow depende do equipamento do usuário.
Vejamos cada uma delas detalhadamente.
Definir uma cor pelo seu código hexadecimal
Esta é a maneira mais conhecida de definir uma cor.
Convém ressaltar que em uma regra CSS é indiferente usar letras maiúsculas ou minúsculas na sintaxe hexadecimal de cores e também que é válido abreviar a notação para três dígitos.
Na notação abreviada cada um dos três dígitos é automaticamente dobrado conforme exemplos a seguir:
#FFF = #FFFFFF
#CF9 = #CCFF99
#cde = #ccddee
#49c = #4499cc
Não é do escopo deste tutorial detalhar o código hexadecimal, contudo ressalto que os dezesseis dígitos hexadecimais são:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente eles são válidos para definir uma cor, podendo em geral ser usada qualquer combinação deles. Assim: #FFDDHH não define uma cor, pois H não é válido.
Existem várias ferramentas online para determinar o código hexadecimal de uma cor. Uma das que eu costumo usar e indico para vocês é esta: http://www.colorschemer.com/online.html
Definir uma cor pelo seu código rgb
rgb é abreviatura para:
r = red (vermelha)
g = green (verde)
b = blue (azul)
Assim o código rgb(xxx, yyy, zzz) indica uma cor obtida com a mistura de uma quantidade xxx de vermelho com yyy de verde e com zzz de azul.
Duas são as maneiras de se definir a quantidade de cada uma das três cores:
Uma faixa de númeração de 0 (zero) até 255
Em percentagem de 0% até 100%
Não é válido usar em uma definição número e percentagem.
Exemplos:
definições válidas
rgb(145, 230, 50) - rgb(20%, 0%, 70%)
definição não válida
rgb(255, 20%, 120)
Não é do escopo deste tutorial detalhar as misturas de cor rgb.
No link indicado no item anterior é possível determinar também, o código rgb de uma cor
Definir cor por palavra-chave
Você pode definir uma cor usando o nome da cor. Os nomes de cor válidos são os listados nas recomendações CSS do W3C.
As Recomendações para CSS 2.1 listam as seguintes 17 cores:
Assim, as regras a seguir são válidas para definir cor
p {color: aqua;}
div {background-color: teal;}
Definir cor baseado no sistema operacional do usuário
As recomendações para CSS2.1 preconizam a definição da cor baseado nas cores adotadas pelo sistema operacional do usuário.
Este tipo de unidade de definição de cor denominado System Colors está em desuso e não deverá constar das futuras Recomendações CSS3.
Trata-se de uma lista de nomes de cores válidas à semelhança da listagem de cores por palavra-chave e que se refere a áreas do sistema operacional.
As cores previstas são:
Embora os valores CSS sejam "case insensitives" recomenda-se usar a grafia com letras maiúsculas e minúsculas ao se escrever o nome das cores de sistema por razões de legibilidade.
Exemplos:
p {color: ThreeDLightShadow;}
div {background: ButtonShadow;}
Veja NESTE LINK as cores definidas por regras de estilo para o seu sistema operacional.
Última modificação: 2009/11/10 14:20:33 GMT
Criado em: 2005-06-24
Atualizado em: 2005-07-14
