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

浏览数：26 / 时间：2015年06月09日

虽然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属性并非只能用于文本显示,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 html sp 使用 class style 代码 html sp 使用

相关文章

随机文章

您可能还喜欢

您可能还喜欢