Why is the text colour property called 'color'?

In CSS, why is it that the text colour is defined with color and not 开发者_如何学运维text-color or font-color?

Also, what's the difference between font- and text-?

The color property does not belong in the fonts or text categories of properties. It actually lives in its own section of the spec, both CSS1 and CSS2.1. There is even an entire CSS3 module dedicated to color.

Each specification refers to color as defining the foreground color, then describes it as referring to the color of the element's text content. But since foreground-color would be unnecessarily verbose, the word "foreground" is left out of the property name. background-color is self-explanatory and serves as a distinction from color.

That said, while the color property typically affects the text of an element, if you also specify a border but don't specify a border-color, the border will take on the same color as the text. This is completely normal because it is stipulated in the CSS box model specification:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

<div style="color: red; border: 1px dotted">
    This block has red text and a red 1-pixel dotted border.
    Notice only the width and style are specified in the style attribute.
</div>

Martin Algesten in his answer has a nice summary of the difference between the font and text properties.

Font is a variant of a typeface, i.e. Arial is the type face, Arial Bold is the font. You're not setting the font colour (I've never heard of a font that has a specific colour). You're setting the colour of the text.

I guess the idea would be that you can have a other elements that are affected by the color, not just text. Compare with text-decoration: underline would clearly just affect the text, but if we imagine we could insert a random shape inline, it would also be affected by the color.