De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.
Cores CSS - Definição com palavra-chave
Colaboração: Maurício (Maujor) Samy Silva
Data de Publicação: 03 de novembro de 2017
As especificações do W3C para as CSS preveem várias propriedades,
tais como color, background-color, border-color e outras,
destinadas a definir cores. Os valores possíveis para tais propriedades
podem ser definidos usandos-se os seguintes tipos de dados:
- valor expressso por uma palavra-chave,
- valor expressso em número hexadecimal,
- valor expressso por uma função RGB,
- valor expressso por uma função RGBA,
- valor expressso por uma função HSL,
- valor expressso por uma função HSLA.
Palavra-chave
Nessa dica mostraremos a definição de cores em CSS com uso de palavras-chave.
O tipo de dado palavra-chave para definir uma cor consiste simplesmente no nome da cor, ou de um nome que expresse a cor com grafia no idioma inglês. Por exemplo:
- red para a cor vermelha,
- green para a cor verde,
- darkslateblue para um tom escuro da cor azul,
- lightcoral para um tom claro da cor coral, e assim por diante.
Sintaxe
A sintaxe CSS para se definir cores é conforme mostrada no exemplo a seguir:
div {
background-color: green;
color: white;
}
Especificações CSS1 para cores
As especificações para as CSS Nível 1, lançadas em 17 de dezembro de 1996, previram 16 palavras-chave para se definir cores. São as cores VGA (Video Graphics Array) suportadas pelo display do primeiro computador IBM/PS2 lançado em 1987. Mais informações na Wikipedia.
As cores VGA e as respectivas palavras-chaves que as definem são mostradas na tabela a seguir:
| palavra-chave | cor | palavra-chave | cor |
|---|---|---|---|
| black | silver | ||
| gray | white | ||
| maroon | red | ||
| purple | fuchsia | ||
| green | lime | ||
| olive | yellow | ||
| navy | blue | ||
| teal | aqua |
Especificações CSS2.1 para cores
As especificações para as CSS Nível 2 Revisão 1, lançadas em 07 de junho de 2011, adicionou a palavra-chave orange (cor laranja) às 16 já existentes para se definir cores.
Especificações CSS3 para cores
As especificações para o Módulo para Cores Nível 3, lançadas em 07 de junho de 2011, previram palavras-chave para se definir as cores previstas em "X Windows System" ou abreviadamente X11. Essas cores são também chamadas de cores extendidas, cores X11 ou cores SVG.
Mais informações no portal W3.org.
O total de palavras-chave para se definir cores é de 147 e uma tabela com essas cores pode ser consultada em também no portal Portal W3.org.
Palavras-chave transparent e currentColor
A palavra-chave transparent foi criada com a finalidade de se sobrescrever
uma cor sólida herdada e a palavra-chave currentColor define uma cor
igual àquela que foi definida para a propriedade color.
Sobre o autor
Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).
No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.
Saiba mais: Facebook , Twitter.
Adicionar comentário
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comentários