Esta página explica mais sobre como você pode especificar cores no CSS.
Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.
Informação: Cor
Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:
| black | gray | silver | white | |||||||||||
| primárias | red | lime | blue | |||||||||||
| secundárias | yellow | aqua | fuchsia | |||||||||||
| maroon | orange | olive | purple | green | navy | teal |
Seu navegador pode suportar muitas cores nomeadas, como:
Para detalhes sobre esta lista extendida, veja: SVG color keywords no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar. |
Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos hexadecimais na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:
| black | #000 |
|
| pure red | #f00 |
|
| pure green | #0f0 |
|
| pure blue | #00f |
|
| white | #fff |
Para a paleta total, especifique dois digitos hexadecimais por cada componente:
| black | #000000 |
|
| pure red | #ff0000 |
|
| pure green | #00ff00 |
|
| pure blue | #0000ff |
|
| white | #ffffff |
Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.
Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos:
|
||||||||||||||||||
Para uma sombra pastel como azul pálido:
|
| Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens.
Por exemplo, este marrom (vermelho escuro): rgb(128, 0, 0)
Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: CSS2 System Colors na CSS Specification. |
Propriedades de cor
Você já usou a propriedade color para textos.
Você também já usou a propriedade background-color para mudar elementos de fundo.
Fundos podem ser configurados para transparent para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.
As caixas de Exemplo neste tutorial usam este fundo amarelo pálido:
background-color: #fffff4; As caixas de Mais detalhes usam esta paleta cinza: background-color: #f4f4f4; |
Ação: Usando códigos de cor
Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)
/*** CSS Tutorial: Página de Cor ***/
/* Fonte da Página */
body {font: 16px "Comic Sans MS", cursive;}
/* Parágrafos */
p {color: blue;}
#first {font-style: italic;}
/* Letras Iniciais */
strong {
color: red;
background-color: #ddf;
font: 200% serif;
}
.carrot {color: red;}
.spinach {color: green;}
Atualize seu navegador para ver o resultado:
| Cascading Style Sheets |
| Cascading Style Sheets |
| No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado.
(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.) |
O que vem depois?
Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.
Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.
A próxima página explica como você pode fazer exceções para separar rigorosamente: Conteúdo