„Kolor” CSS a „kolor czcionki”


136

Czy ktoś wie, dlaczego CSS zapewnia colortekst, ale nie ma font-colorlub text-color?

Wydaje się bardzo sprzeczne z intuicją, text-decoration: underlineraczej font-stylecoś w rodzaju lub coś związanego z czcionkami.

Czy ktoś wie, dlaczego / jak W3C wymyślił tak szeroką gamę nazw CSS, takich jak ta?


1
Zacząłem petycję o wprowadzenie właściwości „font-color”. Może ktoś z was chciałby to podpisać. change.org/p/…
tsuma534

Możesz to zrobić w ramach tagu <font>. np. <font color = "red"> Witaj świecie! <font>
airider74

@ airider74 W którym roku mieszkasz? Element <font> był przestarzały od wielu lat.
kojow7

Tak, ma ... ale nadal działa
airider74

Odpowiedzi:


111

Myślę, że jednym z powodów może być to, że kolor jest stosowany do rzeczy innych niż czcionka. Na przykład:

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

Daje zarówno czerwony kolor czcionki, jak i czerwoną obwódkę.

Alternatywnie, może po prostu być tak, że standardy CSS W3C są całkowicie wsteczne i bezsensowne, jak udowodniono gdzie indziej.


4
Spróbuj dodać następujące elementy do CSS na tej stronie: .post-text { color: blue; border: 1px solid red; }Zobaczysz, że kolor tekstu jest niebieski, mimo że kolor obramowania jest czerwony.
Robusto

wtedy z definicji kolor czcionki jest szybszy niż kolor, ponieważ musi wykonać mniej pracy.
kta

193

W ten sam sposób Boston wymyślił plan ulic. Podążali już tam krowimi ścieżkami i budowali domy w miejscu, w którym nie było ulic, i po chwili zmiana była zbyt trudna.


10

Wiem, że to stary post, ale jak stwierdził MisterZimbu, colorwłaściwość definiuje wartości innych właściwości, takich jak border-colori, z CSS3, of currentColor.

currentColor jest bardzo przydatne, jeśli chcesz użyć koloru czcionki dla innych elementów (na przykład jako tło lub niestandardowe pola wyboru i radia elementów wewnętrznych).

Przykład:

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


Myślę, że to daje jeszcze więcej powodów, aby mieć dostęp do oddzielnej font-color/ text-colorwłaściwości. W ten sposób możesz mieć wiele części elementu z jednym określonym domyślnym kolorem, a tekst w innym, jeśli chcesz. W przeciwnym razie wiąże domyślny kolor z kolorem tekstu.
Ben J

@BenJ Powiązanie domyślnego koloru z głównym kolorem było prawdopodobnie intencją w początkach sieci. Dziś możesz używać zmiennych css ( developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ) i / lub używać preprocesora css, jak Sass, Less, Stylus itp., Gdzie łatwo jest pracować ze zmiennymi.
quasi
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.