Curso Básico de CSS 3
-
Introdução5 Tópicos|1 Teste
-
Sintaxe e Seletores5 Tópicos|1 Teste
-
Valores e Unidades4 Tópicos|1 Teste
-
Funções1 Tópico|1 Teste
-
Cores3 Tópicos|1 Teste
-
Longhand e Shorthand1 Tópico|1 Teste
-
Cascade2 Tópicos|1 Teste
-
Pseudo-classes1 Tópico|1 Teste
-
The Box Model4 Tópicos|1 Teste
-
Tipografia4 Tópicos|1 Teste
-
Projeto To-Do List1 Tópico
-
Próximos Passos...1 Tópico
Definindo cores (Explicita)
Existem diversas maneiras de você definir cores em CSS, mas 3 delas são as mais comuns e você vai ver em praticamente todo codigo CSS.
1 – Explicita ou palavra-chave
é onde você coloca diretamente o nome da cor como nos exemplos a seguir, a grande desvantagem desse formato é que existe uma variaçào limitada de cores e muitas vezes awquele tom de azul que você precisa não existe nesse formato.
background-color: black; color: darkblue; border-color: lightpink;
2 – Hexadecimal
o hexadecimal resolve o problema de cores, nele podemos fazer mais de 16milhões de combinações de cores diferentes utilizando o padrão RGB, onde o R = Red, G = Green e B = Blue. esses 3 valores vao de 0 a 255, porem em hexadecimal que é representado pelo sistema numerico de 16, onde vai do 0
ao 9
+ do A
ao F
onde A=10
, B=11
, e F=15
, ta roger, mas você não falou que era 16
? sim, mas lembre-se que começamos no 0
, então vai do 0 ao 15
.
como construir uma cor em Hexadecimal?
elá é composta por 7 digitos (pode ser abreviado, mas vamos por esse caminho agora que vai ser mais simples entender).
Exemplo: #00A2FF
#
representa que a cor será hexadecimal 00
primeiros dois digitos representam o vermelho(RED), nesse caso, esta cor tem 0 de vermelho A2
terceiro e quarto digito representam o verde(GREEN), nesse caso, A2 são 162 de verde FF
os doi ultimos digitos representam o azul(BLUE), nesse caso, FF são 255 de azul
misturando 0 de vermelho, 162 de verde e 255 de azul vai dar esse um tom de azul bem bonito.
pode ser meio complicado utilizar a cor em hexadecimal, mas depois que você entende bem ele você vai ver que é tranquilo, alem disso existem diversas feramentas para você escolher a cor e ele gerar o hexadecimal, o proprio vscode faz isso.
3 – função RGB
Como ja vimos anterirmente nas funcões em CSS, podemos utilizar a função RGB que é mais facil de você entender o valor e dosar a quantidade de cada cor você vai adicionar na tua mistura de vermelho, verde e azul.
rgb(0,0,0) rgb(255,255,255) rgb(0,255,128)
ela funciona da mesma forma do hexadecimal a unica diferença é que dessa vez você utiliza numeros decimais.
existe também a funcão RGBA que é representada pelo RGB + o alpha ou transparencia, nesse caso os 3 primeiros parametros vao de 0 a 255 para montar o RGB e o quarto parâmetro vai de 0.0 até 1.0 para definir a transparência, onde 0 é totalmente transparente e 1 é totalmente preenchido.
rgba(0,0,0,.3) rgba(255,255,255,0.45) rgba(0,255,128,.80)
Exercício 1: Cores Hexadecimais
Crie um arquivo HTML (index.html) com a seguinte estrutura:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box" id="red-box"></div> <div class="box" id="green-box"></div> <div class="box" id="blue-box"></div> </body> </html>
Crie um arquivo HTML e um arquivo CSS para definir cores usando notação hexadecimal. Use três caixas <div>
e aplique cores diferentes a cada uma delas usando valores hexadecimais. Certifique-se de vincular o arquivo CSS ao arquivo HTML corretamente.
Exercício 2: Cores RGB
Crie um arquivo HTML (index.html) com a seguinte estrutura:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box" id="rgb-red-box"></div> <div class="box" id="rgb-green-box"></div> <div class="box" id="rgb-blue-box"></div> <div class="box" id="rgba-box"></div> </body> </html>
Crie outro arquivo HTML e CSS para definir cores usando notação RGB. Novamente, use três caixas <div>
e aplique cores diferentes a cada uma delas, mas desta vez usando a função rgb()
. Além disso, crie uma quarta caixa <div>
e aplique uma cor usando a função rgba()
com transparência.
Lembre-se de que, nos dois exercícios, você pode escolher as cores que desejar e aplicá-las usando a notação hexadecimal e a função rgb()
. Certifique-se de que os arquivos CSS estejam corretamente vinculados aos arquivos HTML.