CSS “renk” ve “yazı tipi rengi”


136

CSS'nin neden colormetin sağladığını bilen , ancak olmayan font-colorveya olan var mı text-color?

Çok sezgisel, yazı tiplerinden text-decoration: underlineziyade font-stylebenzer veya bir şey gibi görünüyor .

W3C'nin böyle geniş bir dizi CSS adıyla neden / nasıl ortaya çıktığını bilen var mı?


1
"Font-color" özelliğini tanıtmak için bir kampanya başlattım. Belki bazılarınız bunu imzalamak istersiniz. change.org/p/…
tsuma534

Bunu <font> etiketi içinde yapabilirsiniz. eg <font color = "red"> Merhaba Dünya! <font>
airider74

@ airider74 Hangi yılda yaşıyorsunuz? <font> öğesi yıllardır kullanımdan kaldırıldı.
kojow7

Evet var ... ama hala çalışıyor
airider74

Yanıtlar:


111

Bunun bir nedeni, rengin yazı tipi dışındaki şeylere uygulanması olabilir. Örneğin:

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

Hem kırmızı yazı tipi rengini hem de kırmızı bir kenarlık verir.

Alternatif olarak, sadece W3C'nin CSS standartları başka bir yerde kanıtlandığı gibi tamamen geriye ve saçma olabilir.


4
Bu sayfadaki CSS'ye aşağıdakileri eklemeyi deneyin: .post-text { color: blue; border: 1px solid red; }Kenarlık rengi kırmızı olsa bile metin renginin mavi olduğunu göreceksiniz.
Robusto

tanım gereği, yazı tipi rengi daha az iş yapmak zorunda olduğu için renkten daha hızlıdır.
kta

193

Aynı şekilde Boston sokak planını da ortaya koydu. Zaten oradaki inek yollarını izlediler ve sokakların olmadığı evler inşa ettiler ve bir süre sonra değiştirmek çok fazla sorun oldu.


10

Bu eski bir yazı olduğunu biliyorum ama MisterZimbu belirttiği gibi, colorözelliği border-colorve CSS3 ile diğer özelliklerin değerlerini tanımlamaktadır currentColor.

currentColor yazı tipi rengini diğer öğeler için kullanmak istiyorsanız çok kullanışlıdır (örneğin arka plan veya özel onay kutuları ve iç öğelerin radyoları gibi).

Misal:

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


Bu ayrı bir font-color/ text-colorözellik mevcut olması için daha fazla neden verir düşünüyorum . Bu şekilde, öğenin belirli bir varsayılan renkle birçok parçasına, isterseniz başka bir metne sahip olabilirsiniz. Aksi takdirde, varsayılan rengi metin rengine bağlar.
Ben J

@BenJ Varsayılan rengi ana renge bağlamak muhtemelen web'in ilk günlerindeki niyetti. Bugün css değişkenlerini ( developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ) kullanabilir ve / veya değişkenlerle çalışmanın kolay olduğu Sass, Less, Stylus gibi bir css önişlemcisi kullanabilirsiniz.
yarı
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.