Tutorial Iniciante de CSS: Cores

5 03 2008

Exemplo de página HTML com estilos aplicados

CSS tem 16.777.216 cores à sua disposição. Elas podem ter a forma de um nome, um valor rgb (red/green/blue – vermelho/verde/azul) ou um código hexadecimal.

red (vermelho) é o mesmo que rgb(255,0,0), que é o mesmo que rgb(100%, 0%, 0%), que é o mesmo que #ff0000 que é o mesmo que #f00.

Existem 17 nomes de cores válidas predefinidos. São eles aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white e yellow. Veja cada uma na tabela abaixo.

tabela de cores predefinidas no css

Os três valores no valor rgb vão de 0 até 255. 0 é o menor nível (por exemplo, nenhum vermelho) e 255 é o maior nível (por exemplo, vermelho completo). Esses valores também podem ser porcentagens. Preto é definido como ausência de cor – rgb(0,0,0) – e branco é definido como a união das cores – rgb(255,255,255).

Hexadecimal é um sistema numérico de base 16. Nós geralmente usamos o sistema numero decimal (base 10, 0 a 9), mas o sistema hexadecimal tem 16 dígitos, do 0 ao f.

O número hexadecimal tem o prefixo “#” (sustenido) e pode ter um tamanho de três ou seis dígitos. Basicamente, a versão de três dígitos é uma versão comprimida da versão de seis dígitos (#f00 se torna #ff0000, #c96 se torna #cc9966, etc.). A versão de três dígitos é mais fácil de entender (o primeiro dígito, como o primeiro valor em rgb, é o tom de vermelho, o segundo de verde e o terceiro de azul) mas a versão de seis dígitos te dá mais controle sobre a cor exata.

“color” e “background-color”

Cores podem ser aplicadas usando as propriedades color (define a cor do texto) e background-color (define a cor do fundo).

Um fundo azul com texto amarelo pode ser feito assim:

h1 {
	color: yellow;
	background-color: blue;
}

Veja como fica no seu navegador.

Essas cores são fortes demais e, como cores fortes demais incomodam o usuário, devem ser usadas muito raramente. Então é melhor mudar seu arquivo CSS pra tons levemente diferentes:

body {
	font-size: 0.8em;
	color: navy;
}
h1 {
	color: #ffc;
	background-color: #009;
}

Salve o arquivo CSS e atualize seu navegador. Você verá que as cores do primeiro cabeçalho (o elemento h1) mudaram pra amarelo e azul.

Você pode aplicar as propriedades “color” e “background-color” na maioria dos elementos HTML, incluindo body, o que vai mudar as cores de tudo na página.

Recomendo a leitura do artigo sobre cores do Maujor, que vai mais fundo nesse assunto.

BlogBlogs Tags: +web, minicurso, tutorial, iniciante, css

Related Pages

Referência

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

About these ads

Ações

Information

One response

15 05 2008
Tutorial Intermediário de CSS: Imagens de Background « Codando

[...] Cores (Tutorial Iniciante de CSS) [...]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

%d blogueiros gostam disto: