css点击字变颜色

One of the two oldest methods of applying color to web pages, named colors remain very useful in web design and development today. Consisting of 149 distinct keywords (shown above, with their hexadecimal equivalents) CSS named colors have a few special features:

将颜色应用于网页的最古老的两种方法之一，命名颜色在当今的网页设计和开发中仍然非常有用。 CSS命名颜色由149个不同的关键字(如上所示，及其十六进制等效项)组成，具有一些特殊功能：

First, color keywords are used in the same way in CSS as every other color system; for example, to set the background color of the body element in a linked, scoped or embedded style sheet:

首先，在CSS中 ，颜色关键字的使用方式与其他颜色系统相同。 例如，在链接的，作用域的或嵌入的样式表中设置body元素的背景色： 

body {
    background-color: tomato;
}



Most aspects of CSS are case-insensitive, meaning that color keywords can be written uppercase (BLACK), lowercase (black) or mixed. For readability and clarity, lowercase is preferred.

CSS的大多数方面都不区分大小写，这意味着颜色关键字可以写为大写(BLACK)，小写(黑色)或混合使用。 为了提高可读性和清晰度，小写字母是首选。



  • Looking at the named color range above, you’ll observe that English and American spellings for “gray” and “grey” are covered, and render the same shade. However, Internet Explorer has issues with the latter keyword, rendering it as green; you should always use the “gray” spelling for this reason.
  • transparent is a special keyword. Technically, it does not resolve to a hexadecimal color but to an RGB value with 0 alpha: specifically, rgb(0, 0, 0, 0). transparent is valid wherever any color can be used, but is most frequently associated with gradients and borders. In the list above I’ve provided the transparent keyword with its eight-digit hex equivalent value for consistency. transparent是一个特殊的关键字。 从技术上讲，它不会解析为十六进制颜色，而是解析为具有0 alpha的RGB值：特别是rgb(0, 0, 0, 0) 。 transparent在任何可以使用任何颜色的地方均有效，但最常与渐变和边框相关联。 在上面的列表中，我提供了transparent关键字及其八位数的十六进制等效值以保持一致性。
  • rebeccapurple is the most recent addition to the CSS keyword range. It is named after the favorite color of Rebecca Meyer; her father, Eric Meyer, is a beloved contributor to CSS standards and knowledge. Rebecca's death at the age of six was a blow felt throughout the community. rebeccapurple was added to the specification in her honour, and is supported in all recent browser versions. rebeccapurple是CSS关键字范围的最新添加。 它以Rebecca Meyer最喜欢的颜色命名。 她的父亲Eric Meyer是CSS标准和知识的挚爱贡献者。 丽贝卡(Rebecca)六岁的去世是整个社区的一击。 rebeccapurple以对她的敬意被添加到该规范中，并且在所有最新的浏览器版本中rebeccapurple支持。

(Potential Drawbacks)

Keywords have a few potential drawbacks you should be aware of:

关键字有一些潜在的缺点，您应该注意：

  1. Limited color selection. The keywords provided are the only named options available in CSS.
    颜色选择有限 。 提供的关键字是CSS中唯一可用的命名选项。
  2. They’re unadjustable. Unlike HSL, RGB, or even hexadecimal options, color keywords can’t be made lighter or darker in CSS. 它们是不可调整的 。 与HSL ，RGB甚至十六进制选项不同，在CSS中不能使color关键字变亮或变暗。
  3. Color names can be difficult to recall. black, white and red are easy to remember; darkgoldenrod, not so much.
    颜色名称可能很难记住 。 black ， white和red容易记住； darkgoldenrod ，不是很多。
  4. They’re not always logical. You may notice that darkgray is actually lighter than gray, due to a historical anachronism; similarly, darkslategrey is more green than gray.
    他们并不总是合乎逻辑的 。 你可能会注意到， darkgray实际上比更轻 gray ，由于历史的时代错误; 同样， darkslategrey比灰色更绿色。
  5. Mispellings can give unexpected results. Browsers attempt to translate unknown keywords into hexadecimal, meaning that misspelled words can generate unexpected colors. Random words can generate colors too: <body bgcolor="chucknorris">, for example, produces a red.
    拼写错误会产生意想不到的结果 。 浏览器尝试将未知的关键字转换为十六进制，这意味着拼写错误的单词可能会产生意外的颜色。 随机词也可以产生颜色：例如<body bgcolor="chucknorris">产生红色。

Note that you should never use inline attributes for creating appearence changes: always use CSS. However, you will still find plenty of examples of this practice in the wild.

请注意，切勿使用内联属性来创建外观更改：始终使用CSS。 但是，你仍然会发现大量的这种做法在野外的例子。



As a result of these drawbacks, I tend to use color keywords when prototyping, but switch to HSL as I refine the design.

由于这些缺点，我倾向于在原型制作时使用颜色关键字，但在我完善设计时切换到HSL。

There are some solutions to these issues:

这些问题有一些解决方案：

  • Sass allows you to make your own color keywords; I made my own color system (“The New Defaults”) with more natural, easier-to-remember names for that reason. Sass允许您创建自己的颜色关键字； 因此，我用更自然，更易记的名称创建了自己的颜色系统(“新默认值”) 。
  • It’s also possible to lighten and darken any color (including keywords) in Sass. 也可以使Sass中的任何颜色(包括关键字)变暗或变暗 。

If you’re interested in trying to remember the CSS color keywords, Chris Heilmann has made a color matching game that uses keywords.

如果您想记住CSS color关键字，则Chris Heilmann制作了一个使用 keyword的颜色匹配游戏 。


css点击字变颜色