CSS“컬러”와“글꼴 컬러”


136

누군가는 CSS가 제공하는 이유를 알고 color텍스트,하지만이없는 font-colortext-color?

글꼴과 관련 text-decoration: underlinefont-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;
}

빨간색 글꼴 색과 빨간색 테두리를 모두 나타냅니다.

또는 W3C의 CSS 표준은 다른 곳에서 입증 된 바와 같이 완전히 뒤떨어져 있고 무의미한 것일 수도 있습니다.


4
이 페이지의 CSS에 다음을 추가하십시오. .post-text { color: blue; border: 1px solid red; }테두리 색상이 빨간색인데도 텍스트 색상이 파란색임을 알 수 있습니다.
Robusto

정의에 따라 font-color는 작업이 적을수록 색상보다 빠릅니다.
kta

193

보스턴이 거리 계획을 세우는 것과 같은 방식입니다. 그들은 이미 그곳의 젖소 길을 따라 가서 거리가 없었던 곳에 집을 지었고, 얼마 지나지 않아 변화하기가 너무 어려웠습니다.


10

나는 이것이 오래된 게시물이라는 것을 알고 있지만 MisterZimbu가 언급 했듯이이 color속성은의 다른 속성의 값을 border-colorCSS3과의 로 정의하고 있습니다 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 기본 색상을 기본 색상에 바인딩하는 것은 아마도 웹 초창기의 의도 일 것입니다. 현재는 CSS 변수 ( developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables )를 사용하거나 변수를 다루기 쉬운 CSS 전처리기를 Sass, Less, Stylus 등으로 사용할 수 있습니다.
quasi
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.