CSSの「色」と「フォントの色」


136

CSSが提供する理由は誰でも知っています colorがテキストをていますが、持っていませんfont-colortext-color

非常に直感に反するようです text-decoration: underlineで、font-styleフォントに関連するものではなく、

W3CがこのようにさまざまなCSS名を作成した理由/方法を知っている人はいますか?


1
私は「font-color」プロパティを紹介するよう請願を始めました。署名したい方もいるかもしれません。change.org/p/...
tsuma534

<font>タグ内で実行できます。例<font color = "red"> Hello World!<font>
airider74 '20

@ airider74何年住んでいますか?<font>要素は長年にわたって非推奨になっています。
kojow7

はい、あります...しかし、それでも機能します
airider74 '10 / 10/14

回答:


111

色がフォント以外に適用されていることが原因のひとつだと思います。例えば:

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

赤いフォント色と赤い境界線の両方を生成します。

あるいは、W3CのCSS標準が完全に後方にあり、他の場所で証明されているように無意味である可能性もあります。


4
このページのCSSに以下を追加してみてください.post-text { color: blue; border: 1px solid red; }。境界線の色が赤であっても、テキストの色が青であることがわかります。
Robusto 2014年

それから、定義により、font-colorは、より少ない作業で実行できるため、colorよりも速くなります。
kta 2014

193

ボストンがその街路計画を思いついたのと同じように。彼らはすでにそこにいる牛の道をたどり、通りのないところに家を建てました。しばらくすると、変えるのは大変でした。


10

私はこれが古い投稿であることを知っていますが、MisterZimbuが述べたように、colorプロパティは他のプロパティの値をborder-color、CSS3ではとして定義しています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>


これにより、別のfont-color/ text-colorプロパティを使用できるようになる理由がさらに増えると思います。これにより、要素の多くの部分に特定のデフォルトの色を設定し、必要に応じてテキストを別の色に設定できます。それ以外の場合は、デフォルトの色をテキストの色に関連付けます。
ベンJ

@BenJデフォルトの色をメインの色にバインドすることは、おそらくWebの初期の頃の意図でした。今日、css変数(developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)を使用したり、変数を操作しやすいSass、Less、Stylusなどのcssプリプロセッサを使用したりできます。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.