Why do weird things in font color attribute produce real colors?
Possible Duplicate:
Why does HTML think"chucknorris" is a color?
我在教一个小高中的网络编程课,在学习CSS之前,我们先从简单的元素和属性开始,比如字体和颜色。我知道颜色是不赞成使用的,字体不包括在HTML5中,但是为了教学目的,我发现从简单的HTML标记开始并逐步发展到CSS很方便。在上课的第一周,学生们能在一页纸上改变颜色,这让他们非常高兴。(我在第1周也教他们"大帐篷"和"眨眼",但要告诉他们,如果他们再次使用,他们将失去分数)。
其中一个学生开始提交作业,作业的颜色属性值中有一些奇怪的东西,比如"skittles"或"spiderman"。我开始对此进行试验,发现只要你在字体标签的color="attribute中放入任何东西,就会产生某种颜色。而且,在最新版本的IE、Firefox、Chrome、Opera和Safari中,颜色似乎是一致的。
我发现把"幸运符"作为CSS颜色放进去是行不通的。它似乎只适用于HTML属性中需要颜色的地方,例如font color="luckycharms"或body bgcolor="luckycharms"。
我试图向我的学生解释为什么会发生这种情况,到目前为止,我还没能理解它,也没能给谷歌一个好的答案。它似乎被解释为一种颜色代码,但我不知道怎么解释。
更新:经过一些尝试和错误之后,我确定了一个5步算法(使用提供的链接)来将几乎所有的字符串转换成相应的十六进制颜色。我将在这里为未来的访问者提供算法:
将每个非十六进制字符更改为0。
向字符串中添加0,直到其长度是3的倍数。
将字符串分成3等分。
当子字符串的长度大于2,并且所有三个子字符串都以0开头时,请从每个字符串中删除前导0。
如果子字符串的长度仍然大于2,则将每个子字符串截断为2个字符。
就是这样,把子字符串放在一起,就得到了十六进制的颜色代码。我已经用大约20个不同的样本验证了这个算法,并用firefox colorzilla附加颜色选择器比较了结果。
请注意,在这种情况下,这些规则确实是在其中一个答案中指定的链接中特别说明的,并且所有浏览器都将遵守这些规则。所以你可以在任何浏览器中使用它(如果你真的想使用有趣的颜色名称的话)。
- 与其教他们外表如何,不如教他们它意味着什么。相信我,当我教我哥哥的时候,他和我一起工作得很好。教他们好的html,
是什么意思,是什么意思。然后继续造型。另外,不要忘了提到,和是不赞成使用的,不应在实际现场使用,仅用于演示目的。现在我可以读你的问题了。:)
- 结束一个问题或结束一个问题的建议并不意味着这个问题是坏的。仅仅是关于一些已经被覆盖的内容,花时间改进现有问题的答案比从头开始回答副本更好。重复意味着它是关于一些早先引起人们兴趣的事情,并且已经得到了回答;所以这个问题是相关的,只是一个重复。
- @内海:老实说,很少有网页设计专业的学生会对语义标记感兴趣。我知道,我认识HTML已经有一半以上的时间了,几年前在我的课程中不得不学习HTML/CSS 101,而且我到处都看到字体标记…除了我自己的工作:(但公平地说,我的讲师也不是很称职。
- 如果是复制品,我很高兴看到它关闭。在发布这个问题之前,我使用了几个不同的搜索词来尝试查找类似的问题,但是引用的问题没有出现在我的搜索中。
- @乌西哈夫人:当然,我教他们一切的意义。我有17个学生,其中大约5个在听了一次之后就凭直觉得到了一切。他们中的一些人在表现出理解之前必须更加努力。其他人似乎都不怎么感兴趣,但嘿,他们是高中生!
- @BoltClock:我们上基本的HTML课程时,他们告诉我的第一句话是:"HTML是用于pr0的msword"。事实上,在单词和明喻发明之前,HTML被用来标记文档。每当我教任何人,我都从语义学开始。我发现根据需要解释更多的元素更容易,并且在以后使CSS更简单。
- @杰里米古德尔:回到我做家教的时候(不是老师,但我仍然),我只会把我感觉不感兴趣的人踢出去(我知道你没有这个特权)。如果你不感兴趣,你就不会听。如果你不听,你就不明白。如果你不明白…cdn.memegenerator.net/instances/400x/28525393.jpg.
- 我根据您的5个步骤创建了一个"随机字符串到CSS颜色"转换器。你怎么认为?
- @蒂姆皮特鲁斯基太棒了!(我花了几分钟才弄明白怎么做)
- @Jeremygoodel谢谢你,伙计!你怎么这么久?用户界面那么糟糕吗?我创建了一个独立的版本:randomstringtosscolor.com,并将您的问题链接为src。
- @蒂姆皮特鲁斯基对不起,我有时会去几天(甚至几周?)不登录StackOverflow。我知道,真是个懒鬼。哦,顺便说一句,我把我所有的学生都指向你的页面。不确定他们会在乎多少,但至少他们知道。
包括HTML 5规范的游戏规则解析的传统颜色。
他们是长而设计的,是两个和两个允许browsers洽关于他们如何行动的破碎的代码。
- 这些规则都不适用于CSS。CSS有自己的一套解释颜色值的规则,这些规则非常严格。(css21和css-color-3)
- 好吧,我想这行。我按照传统颜色的说明,先把"luckycharms"转换成"luck ycha rms0",使长度成为3的倍数,然后把它转换成三个大小相等的字符串:"luck"、"ycha"和"rms0",然后我像这样截断每个字符串:"lu"、"yc"和"rm"。然后我被难住了一分钟,但最终还是把"lu"变成了"00","yc"变成了"c0","rm"变成了"00"。当然,"00c000"看起来和"幸运符"的颜色一样。我不确定这门课会像我一样有趣…
- 胡扯。我现在使用firefox colorzilla插件来查看颜色到底是什么。LuckyCharms实际上是0cc000,所以我对解析规则的解释并不完全正确。
- 好吧,我明白了,我没有正确地解释说明10。LuckyCharms确实是0cc000,其规则如下:(1)将所有非十六进制字符转换为0的:00c00c0c0a000;(2)添加0使长度成为3:00c0c0a0000的倍数;(3)拆分为3个等长字符串:00c0 0c0a 0000;(4)在所有字符串都长于2时从每个字符串中删除前导零,并且所有字符串仍以0:0c0 c0a 000开头;(5)将所有字符串截断为2个字符:0c c0 00。今晚我可以睡觉了。
- 我发布了5步算法作为上述问题的更新。
很有趣。虽然这似乎为浏览器将interpret任何字符,它可以(A~F)和剩余的两个离开的是0,如果它不能匹配。例如:
还需要更多的experimenting但。
- spiderman首先被转换为000de0 0a0(用0s替换所有非十六进制字符),这很好,因为长度是9(3的倍数),然后转换为000de0a0,这很好,因为至少有一个字符串以0以外的值开头,然后截断为00de0 a,如您所说。它本质上是一个5步算法。
- 我是否遗漏了什么,或者61.5K代表的人写了一个答案,这根本不是一个答案,这实际上是一个评论,违反了一切,我们知道(或应该知道)关于写好的、高质量的答案?
- @是的,你错过了这个答案是两年前写的,当时我没有61.5公里。
这是个intriguing问题。
通experimentation简明,我们发现,"运气",产生相同的颜色,我的眼睛,无论如何)作为"luckycharms"但"luckbealady得到你一darker"阴影",但luckbealadytonight bluer冰"。
顺便说一句,我是第一的思想,这是十六进制recognizable作用的人物,所以你会"luckycharms"为CCA,这rendered黑。组合(0和十六进制chars斑,为uchiba suggests失败,两个是一样的草绿色AA"luckycharms"
多尼Tho有一个答案。
- 我对十六进制代码也有同样的想法,但发现它不能飞。
- 根据@quentin发布的链接中指定的规则,"luckycharms"="luck ycha rms0"="lu yc rm"=00c00,"luck"="luck00"="00c00,luckbealady="luck be al ady0"="lu be ad"="00bear",luckbealadytonight="luckbe aladyt onight="lu al on"=00a000。我的测试表明,实际上,这些值产生的颜色完全相同。
- 嗯,不完全正确,它似乎不适用于"adamlevine",根据我的分析,它应该是"adam levi ne00"或"ade0e0",但它不是。
基本答案为"是什么"的预期发生的时间取决于冰的网络浏览器"。一部《问题与以前版本的HTML 5它之前是不会发生什么当冰非冰encountered标准HTML的浏览器。从"解释"宇智波斑example of冰一方的浏览器可能会interpret色彩规范,但只是作为标准,容许的,明智的,在两个或两个浏览器崩溃的光盘托盘弹出或改变你的显示器的分辨率的两个400x300 PX。当然,这是不理想,那么你的冰一看节目的想法,一时间,作为两个什么应该发生的,如果一个非标准的HTML规范encountered彩色冰。
的原因是它不发生with CSS是它的一个不同的解析器解释色彩。这interprets色彩相同的解析器,不管它的内联CSS或在一联的CSS文件。CSS是定义两个会发生什么当它improper冰encountered价值:它是不容忽视的,和情感的文件不全。
我说这是一个很好的时间说话的对合规类为标准,这是一场关键的认识和一些专业的学生需要知道的不幸。当他们说"但是我精美的彩色玩具厂",你可以告诉他们,这厂精细,当他们看它,但它的说,这可能会碰撞他们的辅导员的浏览器,他们得到一个大的收入。这是AA型的两个真实世界的场景为你可以得到当我们中的一些人,有两个IP,因为周末给我们演示时别人糟糕的代码correctly不工作。
我不是苦但。mostly:)
- 在我看来,如果在IE、火狐、Chrome、Opera和Safari中有相同的功能,那就相当安全了。但我一直在强调这样一个观点,即仅仅因为它有效,并不意味着它是正确的。如果你在HTML中犯了一个错误,它可能在InternetExplorer6中不起作用,你的一些访问者肯定会使用它。即使结果是正确的,对于不正确的HTML,我总是取分数。