This content originally appeared on DEV Community and was authored by Sara Gomes
Definindo as cores
No CSS as cores podem ser definidas por Nome, Código hexadecimal e/ou Código RGB.
Exemplo:
OBS: códigos hexadecimais sempre devem ser iniciados por "#".
Colorindo um botão
A partir daqui, vamos usar de exemplo um simples botão que já tem suas cores pré-definidas pelo próprio navegador.
E para colorir esse botão, passaremos pelas seguintes propriedades de CSS...
background-color
Com a propriedade "background-color" podemos mudar as cores de fundo dos elementos HTML.
color
Já a propriedade "color" nos permite alterar as cores dos textos nos elementos HTML.
border-color
Também podemos mudar as cores das bordas dos elementos usando a propriedade "border-color", mas atenção, para você conseguir ver essa cor refletir, o elemento precisa ter a largura da borda e o tipo já definidos por você ou pelo navegador.
border
Falando ainda sobre a borda, também podemos unir todas as propriedades de bordas, que mencionei, em uma única propriedade. A abreviação será "border".
outline-color
A propriedade "outline-color" é muito parecida com a propriedade de borda, porém, o outline serve para marcar/contornar o elemento que está em foco na página caso o usuário queira passar pelos itens usando o teclado e não o mouse.
Assim como a borda, o outline-color também precisa da definição da largura e do tipo do contorno para assim refletir a cor. A sua abreviação é "outline".
outline
Normalmente as cores de outline ficam ocultas no código e apenas são visíveis quando o elemento de fato estiver em foco na página, de acordo com a navegação do usuário.
Dica Bônus:
outline-offset
A propriedade "outline-offset" adiciona um espaço transparente entre o contorno e a borda do elemento.
Links úteis e referência:
Código do botão:
Codepen
Documentação CSS:
MDN Web Docs
w3schools
This content originally appeared on DEV Community and was authored by Sara Gomes
Sara Gomes | Sciencx (2022-02-10T22:28:56+00:00) Definição e propriedades de cores no CSS. Retrieved from https://www.scien.cx/2022/02/10/definicao-e-propriedades-de-cores-no-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.