CSS“颜色”与“字体颜色”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2501723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS "color" vs. "font-color"
提问by Fred Wilson
Anyone know why CSS provides colorfor text, but does not have font-coloror text-color?
任何人都知道为什么 CSS 提供color文本，但没有font-color或text-color？
Seems very counter-intuitive, kind of like text-decoration: underlinerather than font-styleor something related to fonts.
似乎非常违反直觉，有点像text-decoration: underline而不是font-style与字体相关的东西。
Does anyone know why/how the W3C came up with such a wide array of CSS names like this?
有谁知道 W3C 为什么/如何想出如此广泛的 CSS 名称？
采纳答案by MisterZimbu
I would think that one reason could be that the color is applied to things other than font. For example:
我认为一个原因可能是颜色应用于字体以外的东西。例如：
div {
border: 1px solid;
color: red;
}
Yields both a red font color and a red border.
产生红色字体颜色和红色边框。
Alternatively, it could just be that the W3C's CSS standards are completely backwards and nonsensical as evidenced elsewhere.
或者，这可能只是 W3C 的 CSS 标准完全落后和荒谬，正如其他地方所证明的那样。
回答by Robusto
The same way Boston came up with its street plan. They followed the cow paths already there, and built houses where the streets weren't, and after a while it was too much trouble to change.
波士顿以同样的方式提出其街道计划。他们沿着已经在那里的牛道，在没有街道的地方盖房子，过了一段时间，改变起来太麻烦了。
回答by quasi
I know this is an old post but as MisterZimbu stated, the colorproperty is defining the values of other properties, as the border-colorand, with CSS3, of currentColor.
我知道这是一个老的文章，但作为MisterZimbu陈述，color属性定义其他属性的值，因为border-color并与CSS3的currentColor。
currentColoris very handy if you want to use the font color for other elements (as the background or custom checkboxes and radios of inner elements for example).
currentColor如果您想将字体颜色用于其他元素（例如，作为内部元素的背景或自定义复选框和收音机），则非常方便。
Example:
例子：
.element {
color: green;
background: red;
display: block;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}
.innerElement1 {
border: solid 10px;
display: inline-block;
width: 60px;
height: 100px;
margin: 10px;
}
.innerElement2 {
background: currentColor;
display: inline-block;
width: 60px;
height: 100px;
margin: 10px;
}<div class="element">
<div class="innerElement1"></div>
<div class="innerElement2"></div>
</div>