65

我在教一个jr。高中/高中网络编程课程，我们从简单的元素和属性开始，如字体和颜色，然后再学习 CSS。我知道 HTML5 不推荐使用颜色并且字体不包含在 HTML5 中，但出于教学目的，我发现从简单的 HTML 标记开始并逐步使用 CSS 很方便。在上课的第一周，学生们能够从改变页面颜色中获得很多乐趣。（我也在第一周教他们选框和眨眼，但告诉他们，如果他们再次使用它们，他们将失去分数）。

其中一名学生开始提交带有奇怪颜色属性值的作业，例如“Skittles”或“Spiderman”。我开始对此进行试验，发现几乎任何你放入字体标签的 color="" 属性的东西都会产生某种颜色。在最新版本的 IE、Firefox、Chrome、Opera 和 Safari 中，颜色似乎是一致的。

我发现将“LuckyCharms”作为 CSS 颜色放入是行不通的。它似乎只适用于 HTML 属性中需要颜色的地方，例如 font color="LuckyCharms" 或 body bgcolor="LuckyCharms"。

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

更新：经过反复试验，我确定了一个 5 步算法（使用提供的链接）将几乎任何字符串转换为相应的十六进制颜色。我将在此处提供算法以供未来访问者启迪：

  1. 将每个非十六进制字符更改为 0。
  2. 向字符串添加 0，直到其长度为 3 的倍数。
  3. 将绳子分成3等份。
  4. 当子字符串的长度大于 2，并且所有三个子字符串都以 0 开头时，从每个字符串中删除前导 0。
  5. 如果子字符串的长度仍然大于 2，则将每个子字符串截断为 2 个字符。

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

请注意，在这种情况下，规则确实在答案之一中指定的链接中明确说明，并且所有浏览器都将遵守。因此，您可以依靠它在任何浏览器中工作（如果您真的想使用有趣的颜色名称）。

4

4 回答 4

33

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

它们相当长，旨在让浏览器在处理损坏代码的方式上保持一致。

于 2012-10-17T16:51:07.187 回答
5

很有意思。似乎浏览器将解释它可以解释的任何字符（af），如果它不能匹配，则将其余字符保留为 0。例如：

Spiderman
 00DE0 A

不过还需要更多的尝试。

于 2012-10-17T16:55:07.457 回答
3

这是一个有趣的问题。

通过简短的实验，我发现“Luck”会产生与“LuckyCharms”相同的颜色（无论如何在我看来），但“LuckBeALady”会让你的阴影更深，而“LuckBeALadyTonight”则更蓝。

顺便说一句，我的第一个想法是它作用于可识别的十六进制字符，但这会将“LuckyCharms”变成黑色的 cca。正如 Madara Uchiba 所建议的那样，0 和十六进制字符的组合未能呈现与“LuckyCharms”相同的草绿色

没有答案。

于 2012-10-17T17:01:42.573 回答
2

预期会发生什么的基本答案是“这取决于浏览器”。5 之前的 HTML 版本的问题之一是，当浏览器遇到非标准 HTML 时会发生什么，并没有明确说明。@Madara Uchiha 的解释是浏览器如何解释颜色规范的一个示例，但在标准方面，浏览器崩溃或弹出 CD 托盘或将显示器的分辨率更改为 400x300 也是允许的像素。当然，这并不理想 - 所以你看到的是一位程序员的想法，一次，如果遇到非标准的 HTML 颜色规范会发生什么。

CSS 不会发生这种情况的原因是它是一个不同的解析器来解释颜色。无论是内联 CSS 还是链接的 CSS 文档，这个解析器都会解释颜色。CSS确实定义了遇到不正确的值时会发生什么：它被忽略，并且根本不影响文档。

我想说这是与全班讨论标准合规性的好时机，因为这是学生理解的关键领域 - 以及我不幸认识的一些专业人士。当他们说“但是彩色彩虹糖效果很好”时，您可以告诉他们，当他们看到它时，它可以很好地工作，但是完全有可能会导致他们的教练的浏览器崩溃，从而为他们赢得一个大胖 F。当我们中的一些人不得不放弃我们的周末，因为在演示期间，其他人的蹩脚代码不能正常工作时，你可以得到一个真实的场景。

不过我并不苦。主要是:)

于 2012-10-17T17:15:57.363 回答