网页制作 
首页 > 网页制作 > 浏览文章

CSS中的两个特殊值用于控制层叠的inherit和initial的方法

(编辑:jimmy 日期: 2024/5/9 浏览:3 次 )

在CSS中有两个特殊值可以赋给任意属性,用于控制层叠:inherit和initial。我们来看看这两个特殊值。

CSS中的两个特殊值用于控制层叠的inherit和initial的方法

使用inherit关键字

有时,我们想用继承代替一个层叠值。这时候可以用 inherit 关键字。可以用它来覆盖另一个值,这样该元素就会继承其父元素的值。

假设我们要给网页加上一个浅灰色的页脚。在页脚上有一些链接,但我们不希望这些链接太显眼,因为页脚不是网页的重点。因此要将页脚的链接变成深灰色(如图下图)。

继承了灰色文本颜色的 “Terms of use” 链接

通常我们会给网页的所有链接加上一个字体颜色(如果不加的话,就会以用户代理样式为准)。这个颜色也会作用于页脚的“Terms of use”链接。为了让页脚的链接变成灰色,需要覆盖颜色值。将下列代码添加到你的样式表。

a:link{                     /* (一下3行)全局的网页链接颜色 */ 
  color: blue; 
} 
... 
.footer{ 
  color: #666;      /* 页脚的文本设置位灰色 */ 
  background-color: #ccc; 
  padding: 15px 0; 
  text-align: center; 
  font-size: 14px; 
} 
.footer a{ 
  color: inherit;   /* 从页脚继承文本颜色 */ 
  text-decoration: underline; 
} 

第三个规则集覆盖了蓝色的链接色,让页脚链接的层叠值为 inherit。因此,它继承了父元素的颜色。

总结

上一篇:CSS动态条形加载条效果的示例代码
下一篇:使用Flex布局实现头部固定内容区域滚动的方法
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网