No CSS é possível inserir cores (em um texto, por exemplo) de diferentes formas. Quais são elas? Mostre exemplos de cada uma delas (sintaxe HTML de cada uma)
Soluções para a tarefa
Resposta:
Para atribuir cores aos elementos com CSS (texto, bordas, background) temos a opção de utilizar os seguintes valores fixos ou funções:
• Nome da cor (em inglês), como red, blue, yellow, etc;
• Código Hexadecimal, como #ffffff, #ababab, etc;
• RGB: função que define uma cor de acordo com os valores de vermelho, verde e azul (Red, Green e Blue) que a compõem;
• RGBA: função que define uma cor de acordo com os valores de Red, Green, Blue e Alpha-Opacity. O último parâmetro diz respeito à opacidade da cor e varia de 0 (totalmente transparente) a 1 (totalmente opaco);
• HSL: função que define a cor de acordo com os valores de Hue, Saturation e Lightness. O valor de hue representa um ângulo na roda de cores, logo, varia de 0 a 360. O segundo argumento, saturation, varia de 0 a 100% e representa a saturação da cor, ou seja, o quão “viva” (valores maiores) ou “apagada” (valores menores) a cor será. Por fim, lightness indica a luminosidade aplicada sobre a cor. Seu valor também varia de 0 (totalmente escuro, ou preto) a 100% (totalmente iluminado, ou branco).
• HSLA: funciona da mesma forma que a HSL, contando apenas com um argumento alpha adicional, assim como na RGBA.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cores em CSS</title>
<style>
div { height: 50px }
#div1 { background-color: yellow; }
#div2 { background-color: #ababab; }
#div3 { background-color: rgb(125, 89, 65); }
#div4 { background-color: rgba(125, 89, 65, 0.5); }
#div5 { background-color: hsl(120, 100%, 50%); }
#div6 { background-color: hsla(120, 50%, 50%, 0.5);}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</body>
</html>
Explicação: