为什么在字体颜色属性中奇怪的值会产生真实的颜色?

66
我正在教授一个初中/高中的网页编程课程,我们先从简单的元素和属性开始,比如字体和颜色,然后再逐步转向CSS。我知道颜色已经被弃用,而字体也没有包括在 HTML5 中,但出于教学目的,我认为从简单的 HTML 标签开始,逐渐引入 CSS 更为方便。在课程的第一周,学生们可以通过更改页面上的颜色获得很多乐趣。(我还会在第一周教他们滚动字幕和闪烁文字,但我会告诉他们,如果以后再使用这些内容,将会失去分数)。
其中一名学生开始提交带有奇怪颜色属性值的作业,比如“skittles”或“spiderman”。我开始尝试这个,并发现在“color =”“”属性标签下放入几乎任何东西都能产生某种颜色。而且这种颜色似乎在最新版本的 IE、Firefox、Chrome、Opera 和 Safari 上都是一致的。
我发现,在 CSS 的“color =”处输入“luckycharms”并不起作用。它似乎只在期望 HTML 属性中使用颜色时有效,例如 font color="LuckyCharms",或 body bgcolor="LuckyCharms"。
我试图向我的学生解释为什么会发生这种情况,但到目前为止我还没有能够理解它,也无法在 Google 上找到一个好的答案。看起来它被解释为一种颜色代码,但我搞不懂是怎么回事。
更新:经过一些尝试和错误,我已经确定了一个五步算法(使用提供的链接),可以将几乎任何字符串转换为相应的十六进制颜色。我将在此提供算法,以便未来的访问者受益:
1. 将每个非十六进制字符更改为0。 2. 添加0,直到字符串的长度是3的倍数。 3. 将字符串分成三个相等的部分。 4. 当子字符串的长度大于2,并且所有三个子字符串都以0开头时,从每个字符串中删除前导0。 5. 对于每个子字符串,将其解释为十六进制数字,然后连接它们以形成一个六位十六进制数字,作为颜色代码。
  • 如果子字符串的长度仍然大于2,则将每个子字符串截断为2个字符。
  • 就是这样,把子字符串放在一起就可以得到十六进制颜色代码。我已经通过了大约20个不同样本的验证,并使用Firefox ColorZilla插件的颜色选择器进行了比较。

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


    4
    不要教他们如何看起来,而是教他们它的含义。相信我,在我教我的兄弟时,这种方法非常有效。教给他们良好的HTML,告诉他们 <p> 是什么意思,<strong> 又是什么意思。然后继续学习样式设计。还要注意提到 <font><color> 已经被弃用,不应在实际网站中使用,只用于演示目的。现在我可以读懂你的问题了。 :) - Madara's Ghost
    关闭问题或建议关闭问题,并不意味着该问题不好。只是表示这个问题已经有了答案,花时间在回答重复的问题上并不划算,而应该把时间用于完善已有问题的答案。重复问题意味着这是一个曾经引起过人们兴趣,并已经被解决的问题;因此这个问题仍然是相关的,只是一个重复问题。 - Jukka K. Korpela
    7
    我根据你的五个步骤创建了一个“将随机字符串转为CSS颜色”的转换器。你觉得怎么样? - TimPietrusky
    1
    @TimPietrusky 真是太棒了!(虽然我花了几分钟才弄明白如何操作) - Jeremy Goodell
    1
    @JeremyGoodell 谢谢老兄!你怎么这么久才来啊?UI 那么糟糕吗?我创建了一个独立版本:randomstringtocsscolor.com 并将你的问题链接作为 src。 - TimPietrusky
    显示剩余6条评论
    4个回答

    33
    HTML 5规范包括解析传统颜色的规则。这些规则相当冗长,旨在使浏览器在处理错误代码时保持一致。请参考此处了解更多信息。

    而这些规则都不适用于CSS。CSS有自己的一套解释颜色值的规则,这些规则相当严格。(CSS21css-color-3 - BoltClock
    好的,我认为这个可以了。我按照传统颜色的说明进行操作,首先将“LuckyCharms”转换为“LuckyCharms0”,使其长度成为3的倍数,然后将其转换为三个相等大小的字符串:“Luck”、“yCha”和“rms0”,然后我像这样截断了每个字符串:“Lu”、“yC”和“rm”。然后我卡住了一分钟,但最终还是将“Lu”转换为“00”,“yC”转换为“C0”,并将“rm”转换为“00”。果然,“00C000”看起来与“LuckyCharms”相同。我不确定班级是否会像我一样对这个练习感兴趣... - Jeremy Goodell
    糟糕了。我现在正在使用Firefox的Colorzilla插件查看颜色真正的值。LuckyCharms实际上是#0CC000,所以我的解析规则理解得不太正确。 - Jeremy Goodell
    好的,我明白了,我没有正确理解指令10。根据以下规则,LuckyCharms确实是#0CC000:(1)将所有非十六进制字符转换为0:00c00C0a000;(2)添加0以使长度成为3的倍数:00c00C0a0000;(3)将其分成3个等长字符串:00c0 0C0a 0000;(4)从每个字符串中删除前导零,同时所有字符串的长度都大于2,并且所有字符串仍然以0开头:0c0 C0a 000;(5)将所有字符串截断为2个字符:0C C0 00。现在我可以安心睡觉了。 - Jeremy Goodell
    1
    我在上面的问题中发布了5步算法的更新。 - Jeremy Goodell

    5

    非常有趣。看起来浏览器会解释它能够识别的任何字符(a-f),并在无法匹配时将其余部分设为0。例如:

    Spiderman
     00DE0 A
    

    然而,仍需要进行更多实验。


    1
    蜘蛛侠首先被转换为000de00a0(用0替换所有非十六进制字符),这很好,因为长度是9(3的倍数),然后变成000 de0 0a0,这也很好,因为至少有一个字符串以不是0的字符开头,然后像你说的那样截断为00 DE 0A。它本质上是一个五步算法。 - Jeremy Goodell
    1
    我是否漏掉了什么,还是那个拥有61.5k声望值的人写了一个根本不是答案而实际上是评论的回答,并且违反了我们所知道(或应该知道)的关于撰写好的、高质量答案的一切? - trejder
    4
    @trejder,你忽略了一个事实,这个回答是在两年前写的,当时我还没有收到61.5k。 - Madara's Ghost

    3

    这是一个有趣的问题。

    经过简要试验,我发现,“Luck”产生了与“LuckyCharms”相同的颜色(在我的眼里),但“LuckBeALady”会产生比较深的色调,而“LuckBeALadyTonight”则是蓝色。

    顺便说一下,我最初认为它作用于可识别的十六进制字符,但这将“LuckyCharms”转换成了cca,渲染为黑色。“0”和十六进制字符的组合,正如Madara Uchiba所建议的那样,未能呈现出与“LuckyCharms”相同的草绿色。

    不过暂时还没有答案。


    我也曾经认为十六进制代码是一样的,但后来发现行不通。 - Jeremy Goodell
    根据@Quentin发布的链接中指定的规则,“LuckyCharms” =“Luck yCha rms0”=“Lu yC rm”=#00C000,“Luck”=“Luck00”=“#00C000,LuckBeALady =“Luck BeAL ady0”=“Lu Be ad”=#00BEAD,而LuckBeALadyTonight =“LuckBe ALadyT onight =“Lu AL on”=#00A000。我的测试表明,确实这些值产生完全相同的颜色。 - Jeremy Goodell
    嗯,不太对,它似乎不能适用于“adamlevine”,根据我的解析,它应该是“adam levi ne00”或“#ADE0E0”,但实际上并不是这样。 - Jeremy Goodell

    2
    “预期发生的情况取决于浏览器。”这是基本答案。HTML5之前的版本存在一个问题,就是当浏览器遇到非标准的HTML时会出现未指定的情况。@Madara Uchiha提供的解释是浏览器如何解释颜色规范的一个例子,但是从标准的角度来看,浏览器崩溃、弹出CD托盘或将显示器分辨率更改为400x300像素也是可以的。当然,这并不理想。因此,您看到的是某个程序员对遇到非标准HTML颜色规范时应该发生什么的想法。
    CSS不会出现这种情况的原因是它是一个不同的解析器解释颜色。无论是内联CSS还是链接的CSS文档,都由同一解析器解释颜色。CSS定义了当遇到不正确的值时会发生什么:它被忽略,不会影响文档。
    我会说现在是向班级讲解标准合规的好时机,因为这对于学生来说是一个至关重要的理解领域,也是我不幸认识的一些专业人士所需要了解的。当他们说:“但是彩色Skittles很好用”时,你可以告诉他们,它在他们看起来很好用,但完全有可能会使他们的教师浏览器崩溃,从而赚取一个大大的F。这是一个最接近实际情况的场景,当我们中的一些人不得不放弃周末,因为在演示时其他人的糟糕代码不能正确地工作。

    虽然我不太高兴,但我并不怨恨。


    依我之见,如果一个东西在IE、Firefox、Chrome、Opera和Safari上运行相同,那就相当安全了。但我不断地强调这样一个观念,即仅仅因为它能运行,并不意味着它是正确的。而且,如果你在HTML中犯了一个错误,它很可能不会在某些访问者一定会使用的Internet Explorer 6中工作。即使结果是正确的,我也会扣分不正确的HTML。 - Jeremy Goodell

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接