为什么字体颜色属性中的怪异事物会产生真实的颜色? [重复]

问题描述 投票:57回答:4

我正在教小。高中/高中Web编程课程,在开始使用CSS之前,我们从简单的元素和属性(如字体和颜色)开始。我知道不赞成使用颜色,并且HTML5中不包含字体,但是出于教学目的,我发现从简单的HTML标签开始并逐步发展到CSS十分方便。学生在上课的第一周就可以在页面上更改颜色,因此获得了很多乐趣。 (我还教他们跑马灯并在第1周眨眼,但要告诉他们,如果他们再次使用它们,他们将失去积分)。

[其中一名学生开始提交带有颜色属性值中的奇异事物的作业,例如“ Skittles”或“ Spiderman”。我开始对此进行试验,发现几乎所有放在font标签上的color =“”属性中的东西都会产生某种颜色。而且似乎颜色在最新版本的IE,Firefox,Chrome,Opera和Safari中是一致的。

我发现将“ LuckyCharms”作为CSS颜色放置不起作用。它似乎仅在HTML属性中需要颜色的地方才起作用,例如字体color =“ LuckyCharms”或body bgcolor =“ LuckyCharms”。

我正在尝试向全班解释为什么会发生这种情况,但到目前为止我还无法理解,或者向Google给出了很好的答案。似乎它被解释为颜色代码,但我不知道该怎么做。

UPDATE:经过反复试验,我确定了一个5步算法(使用提供的链接)将几乎所有字符串转换为相应的十六进制颜色。我将在此处提供算法,以启发未来的访客:

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

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

请注意,在这种情况下,规则确实是在答案之一中指定的链接中明确规定的,所有浏览器都将遵守。因此,您可以依靠它在任何浏览器中使用它(您是否真的想使用有趣的颜色名称)。

html fonts colors
4个回答
29
投票

HTML 5规范包括the rules for parsing legacy colours

它们相当长,旨在使浏览器在处理损坏代码方面保持一致。


4
投票

非常有趣。似乎浏览器将解释它可以(a-f)的任何字符,如果不匹配,则将其余字符保留为0。例如:

Spiderman
 00DE0 A

不过仍然需要更多的实验。


3
投票

这是一个有趣的问题。

[通过简短的实验,我发现“运气”产生的颜色与“ LuckyCharms”相同(但在我看来,但“ LuckBeALady”使您的阴影变深,而“ LuckBeALadyTonight”则变蓝。

BTW,我的第一个念头是它正在作用于可识别的十六进制字符,但是这将“ LuckyCharms”变成了cca,从而使黑色。正如Madara Uchiba所建议的,0和十六进制字符的组合未能呈现与“ LuckyCharms”相同的草绿色]

没有答案。


2
投票

预期发生的基本答案是“取决于浏览器”。 5之前的HTML以前版本的问题之一是,当浏览器遇到非标准HTML时会发生什么情况,尚不清楚。 @Madara Uchiha的解释是浏览器如何解释颜色规范的一个示例,但这在浏览器崩溃或弹出CD托盘或将显示器的分辨率更改为400x300时是标准允许的像素当然,这不是理想的-因此,您所看到的只是一次程序员的想法,即遇到非标准HTML颜色规范时会发生什么。

之所以没有在CSS中发生,是因为它是解析颜色的不同解析器。无论是嵌入式CSS还是链接的CSS文档中,该解析器都会解释颜色。 CSS does define遇到不正确的值时会发生什么:它将被忽略,并且完全不会影响文档。

我想说这是与全班同学讨论标准合规性的好时机,因为这是学生理解的关键领域-有些专业人士我很不幸。当他们说“但是彩色吃喝玩乐效果很好”时,您可以告诉他们当他们看时效果很好,但是很有可能会崩溃他们的讲师的浏览器,从而使他们大赚一笔。 。当我们中的一些人不得不放弃周末时,因为在演示时,别人的糟糕代码无法正常工作,因此,这与实际情况非常接近。

我一点也不苦。通常是:)

© www.soinside.com 2019 - 2024. All rights reserved.