CSS“颜色”与“字体颜色”

136

任何人都知道为什么CSS提供color的文字，但没有font-color或text-color？

似乎非常违反直觉，有点像字体text-decoration: underline而不是font-style字体。

有谁知道为什么/如何W3C提出这么多的CSS名称？

css

— 弗雷德·威尔逊
source

1

我已经开始介绍“ font-color”属性。也许你们中的某些人想签名。change.org/p/...

— tsuma534

您可以在<font>标记内进行操作。例如<font color =“ red”> Hello World！<font>

— airider74 '19

@ airider74您住在哪一年？<font>元素已被弃用多年。

— kojow7

是的，它有...但是它仍然有效

— airider74

111

我认为原因之一可能是颜色应用于字体以外的其他东西。例如：

div {
    border: 1px solid;
    color: red;
}

产生红色字体颜色和红色边框。

另外，也有可能W3C的CSS标准完全落后并且毫无意义，如其他地方所证明的那样。

— 津布先生
source

4

尝试在此页面的CSS上添加以下内容：.post-text { color: blue; border: 1px solid red; }即使边框颜色为红色，您也会看到文本颜色为蓝色。

— Robusto

然后根据定义，font-color比color更快，因为它要做的工作更少。

— kta

193

波士顿以同样的方式制定其街道计划。他们沿着已经在那里的牛路走去，并在没有街道的地方建造了房屋，过了一会儿，很难改变。

— 罗布斯托
source

10

我知道这是一篇旧文章，但是正如MisterZimbu所述，该color属性定义了其他属性的值，如border-colorCSS 的and和currentColor。

currentColor 如果要将字体颜色用于其他元素（例如，作为背景或自定义复选框以及内部元素的单选），则非常方便。

例：

.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>

展开摘要

— 准
source

我认为这提供了更多的理由来提供单独的font-color/ text-color属性。这样，您可以使元素的许多部分具有一种特定的默认颜色，如果需要，文本可以具有另一种默认颜色。否则，它将默认颜色与文本颜色绑定在一起。

— 本J

@BenJ将默认颜色绑定到主要颜色可能是Web早期的意图。今天，您可以使用css变量（developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables）和/或将css预处理程序用作Sass，Less，Stylus等，在这些变量中易于使用。

— 准