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.


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 / Alteração )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alteração )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alteração )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alteração )

Conectando a %s




Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

%d blogueiros gostam disto: