为什么奇怪的东西在字体颜色属性产生真正的颜色？ [英] Why do weird things in font color attribute produce real colors?

问题描述

可能重复：

我在教一个jr。高/高中的Web编程类，我们开始使用简单的元素和属性，如字体和颜色，然后移动到CSS。我知道颜色被弃用，字体不包括在HTML5中，但是为了教学目的，我发现从简单的HTML标签开始方便地工作到CSS。学生在课堂第一周的时候能够在页面上改变颜色，获得了很多的快乐。 （我也教他们在第一周的选择和眨眼，但告诉他们，如果他们再次使用它们，他们将失去积分）。

I'm teaching a jr. high/high school web programming class, and we're starting with simple elements and attributes like font and color before moving on to CSS. I know color is deprecated and font is not included in HTML5, but for teaching purposes, I find it convenient to start with simple HTML tags and work our way up to CSS. The students get a lot of joy out of being able to change colors on a page during the first week of class. (I also teach them marquee and blink in week 1, but inform them that if they ever use them again, they will lose points).

其中一个学生开始提交颜色属性值中的奇怪的作业，如Skittles或Spiderman。我开始尝试这个，发现只是你把任何你放在color =属性的字体标签产生某种颜色。并且似乎颜色在最新版本的IE，Firefox，Chrome，Opera和Safari中是一致的。

One of the students started submitting homework with odd things in the color attribute values, like "Skittles" or "Spiderman". I started experimenting with this and discovered that just about anything you put into the color="" attribute on the font tag produces some sort of color. And it appears that the color is consistent across the latest versions of IE, Firefox, Chrome, Opera, and Safari.

我发现将LuckyCharms CSS颜色不工作。它似乎只在HTML属性中需要颜色的地方工作，例如font color =LuckyCharms或body bgcolor =LuckyCharms。

I have discovered that putting "LuckyCharms" in as a CSS color DOES NOT WORK. It only seems to work where colors are expected in HTML attributes, for example font color="LuckyCharms", or body bgcolor="LuckyCharms".

向我的类解释为什么会发生这种情况，到目前为止我还没有能够理解它，或者谷歌一个很好的答案。看起来它被解释为一个颜色代码，但我不能理解如何。

I'm trying to explain to my class why this happens, and so far I haven't been able to make sense of it, or to Google a good answer. It would appear that it's being interpreted as a color code, but I can't make sense of how.

更新： / strong>经过一些试验和错误，我已经确定一个5步算法（使用提供的链接）几乎任何字符串转换为相应的十六进制颜色。我将在此提供用于未来访问者编辑的算法：

UPDATE: After some trial and error, I have determined a 5-step algorithm (using the link provided) to convert pretty much any string into the corresponding hex color. I will provide the algorithm here for the edification of future visitors:

1. 将每个非十六进制字符更改为0。


2. 将0添加到字符串中，直到其长度为3的倍数。


3. 将字符串拆分为3个相等的部分。


4. 子字符串的长度大于2，并且所有三个子字符串以0开头，从每个字符串中删除前导0.


5. 如果子字符串的长度-strings仍然大于2，然后将每个子字符串截断为2个字符。

1. Change each non-hex character to a 0.
2. Add 0's to the string until its length is a multiple of 3.
3. Divide string into 3 equal parts.
4. While the length of the sub-strings is greater than 2, and all three of the sub-strings begin with a 0, remove the leading 0s from each string.
5. If the length of the sub-strings is still greater than 2, then truncate each substring to 2 characters.

就是这样，将子字符串放在一起，得到你的十六进制颜色代码。我已经验证了这个算法与大约20个不同的样本，并使用Firefox ColorZilla附加颜色选择器比较结果。

That's it, put the substrings together and you've got your hex color code. I have verified this algorithm with about 20 different samples and compared the results using the Firefox ColorZilla add-on color picker.

请注意，在这种情况下，在其中一个答案中指定的链接中说明，并将被所有浏览器遵守。所以这是你可以指望在任何浏览器中工作的东西（你真的想使用有趣的颜色名称）。

Note that in this case, the rules ARE indeed specifically stated in the link specified in one of the answers and will be adhered to by all browsers. So it is something you can count on to work in any browser (should you really want to use funny color names).

推荐答案

HTML 5规范包括解析旧颜色的规则。

The HTML 5 specification includes the rules for parsing legacy colours.

它们相当长，旨在使浏览器能够统一处理破碎的代码。

They are rather long, and are designed to allow browsers to be consistent about how they handle broken code.

这篇关于为什么奇怪的东西在字体颜色属性产生真正的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！