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.