CSS "color" vs. "font-color"


136

Хтось знає, чому CSS надає colorтекст, але не має font-colorчи text-color?

Здається, дуже контр-інтуїтивно зрозумілим, як на кшталт text-decoration: underline, font-styleабо щось, що стосується шрифтів.

Хтось знає, чому / як W3C придумав такий широкий набір CSS-імен, як цей?


1
Я розпочав заяву про введення властивості "font-color". Можливо, хтось із вас хотів би це підписати. change.org/p/…
tsuma534

Ви можете зробити це в тезі <font>. наприклад <font color = "red"> Hello World! <font>
airider74

@ airider74 У якому році ти живеш? Елемент <font> був застарілий протягом багатьох років.
kojow7

Так, це… але все одно працює
airider74

Відповіді:


111

Я думаю, що однією з причин може бути те, що колір застосовується до речей, крім шрифту. Наприклад:

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

Виходить як червоний колір шрифту, так і червона рамка.

Крім того, може бути лише те, що стандарти CSS W3C є повністю відсталими та безглуздими, як це показано в інших місцях.


4
Спробуйте додати наступне до CSS на цій сторінці: .post-text { color: blue; border: 1px solid red; }Ви побачите, що колір тексту є блакитним, навіть якщо колір межі є червоним.
Робусто

то за визначенням колір шрифту швидший, ніж кольоровий, оскільки він повинен робити менше роботи.
kta

193

Так само, як Бостон придумав свій план вулиць. Вони йшли вже коров’ячими стежками, там будували будинки, де вулиць не було, і через деякий час змінити було надто багато проблем.


10

Я знаю, що це стара публікація, але, як заявив MisterZimbu, colorвластивість визначає значення інших властивостей, як border-colorі, з CSS3, of 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властивість доступно. Таким чином у вас може бути багато частин елемента з одним конкретним кольором за замовчуванням, а текст в іншому, якщо ви хочете. В іншому випадку він пов'язує колір за замовчуванням з кольором тексту.
Бен Дж

@BenJ Прив’язання кольору за замовчуванням до основного кольору, ймовірно, було наміром у перші дні Інтернету. Сьогодні ви можете використовувати змінні css ( developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ) та / або використовувати препроцесор css як Sass, Less, Stylus і т.д., де легко працювати зі змінними.
квазі
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.