CSS的color属性并非只能用于文本显示

2022-11-02,,,,

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。

对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方。

你可以先看一下下面的演示:

HTML代码

<img alt="Example alt text" width="" height="">

<ul>
<li>Example list item</li>
</ul> <ol>
<li>Example list item</li>
</ol> <hr>

CSS代码

body {
color: yellow;
background: #;
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属性并非只能用于文本显示的相关教程结束。

《CSS的color属性并非只能用于文本显示.doc》

下载本文的Word格式文档,以方便收藏与打印。