虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。
对于CSS的color
属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员,我相信你未必知道color
属性除了能用在文本显示,还可以用作其它地方。
你可以先看一下下面的演示:
HTML代码
<img alt="Example alt text" width="200" height="200"> <ul> <li>Example list item</li> </ul> <ol> <li>Example list item</li> </ol> <hr>
CSS代码
body { color: yellow; background: #444; font-size: 20px; font-family: Arial, sans-serif; text-align: center; } ul { border: solid 2px; text-align: left; } ol { text-align: left; } hr { border-color: inherit; }
请注意,上面的代码里只使用了一个color
属性,就是在body
元素上,设置成了yellow
。但是,你也看到了,所有这个页面上的东西都变成了黄色,包括:
- 无法显示的图片的
alt
文字 - list元素的边框
- 无序list元素前面的小点
- 有序list元素前面的数字
- 还有
hr
元素
有趣的是,这个hr
元素,缺省情况下它并不从body
上继承color
的属性,但我使用border-color: inherit
强制让它继承。这是个很诡异的特征。
在CSS规范里是这样说的:
这个属性声明了元素文本内容的前景色(foreground color)。除此之外,它的值还被用于其它地方间接的引用….比如,其它可以接受颜色值的属性。
CSS的color属性并非只能用于文本显示
时间: 2024-10-12 21:45:05