iMasters | Por uma internet mais criativa e dinâmica

• CSS

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 4 comentários

Detalharemos 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:
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.

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

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.

Veja NESTE LINK as cores definidas por regras de estilo para o seu sistema operacional.

Saudações e bons estudos!

Descubra a versatilidade das CSS
Projete conforme as Web Standards.

Todos os artigos de Mauricio Samy

4 comentários publicados

• 1. Esqueceu do 0

  Quinta-feira, 14/07/2005, por Bruno
  

  Cara, vc esqueceu de citar o 0 (zero) na listagem dos números hexadecimais... ;)
  falow....

  Responder comentário

• 2. ERRATA

  Sexta-feira, 15/07/2005, por Augusto Vianna
  

  Obrigado Bruno
  
  Onde se lê:
  ...dígitos hexadecimais são:
  1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente...
  
  Leia-se:
  ...dígitos hexadecimais são:
  0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente...

  Responder comentário

• 3. Teste

  Sexta-feira, 22/07/2005, por Mauricio
  

  teste

  Responder comentário

• 4. ERRATA

  Sexta-feira, 22/07/2005, por Mauricio
  

  Obrigado Bruno
  Onde se lê: ... dígitos hexadecimais são:
  1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente...
  
  Leia-se: ...dígitos hexadecimais são:
  0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente...

  Responder comentário

Sobre o autor

Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.

Indique para um amigo

Tags relacionadas

iphone windows internet crescimento 3g brasil twitter ti php desenvolvimento youtube celular apple google lançamento criação linux web tecnologia mercado yahoo microsoft mobile firefox android seguranca

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!