前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网页|CSS继承性

网页|CSS继承性

作者头像
算法与编程之美
发布2019-11-07 11:54:09
1K0
发布2019-11-07 11:54:09
举报

提出问题

为了使我们的网页能够以更加有效的方式设置为网页格式,我们添加CSS,但我们不可能重复的添加相同的样式,这样太浪费时间,因此CSS增加了继承。继承是指包含在内部样式的标签能够拥有外部标签的样式性,即子元素可以继承父元素的属性。这种继承性允许样式不仅应用于某个特定的元素,同时也应用于其后代,而其后代所定义的新样式,却不会影响父代样式。但我们在写写继承的时候总是会出错,所以接下来我们就来系统的讲一下CSS的继承性的一些特殊点。

解决问题

1、CSS继承的局限性

在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继续也有其局限性。首先,有些属性是不可继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。如果继承了边框属性,那么文档看起来就会很奇怪,除非采取另外的办法闭掉边框的继承属性。Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。

2.继承中容易引起的错误

有时候继承也会带来些错误,比如说下面这条CSS定义:

body{color:blue}

在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成这样:

body,table,th,td{color:blue}

这样表格内的文字也会变成蓝色

3.多种样式混合应用

既然有了继承性,那么在样式表中的应用上可能会有些读者搞不清,多个样式表同时应用到一个对象上会发生什么情形呢?先举个简单的例子:

样式定义:

.apple{color:red;}  h1{color:yellow;}

应用举例代码:

<h1 class=”apple”>这儿的苹果好红啊</h1>

应用举例效果:

因为选择符H1和.apple都匹配上面的H1元素,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这段文字应用了.apple这个样式,所以它显示的是红色。这是因为两条规则的特殊性不一样,CSS规则必须这样进行处理。

样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

  1)统计选择符中的ID属性个数。

  2)统计选择符中的CLASS属性个数。

  3)统计选择符中的HTML标记名格式。

4.CSS继承的优先级问题

上面我们讨论了CSS的继承性和特殊性,在特殊性的框架下,被继承的特性值为0,这就意味着任何显示声明的规则将会覆盖其继承样式。因此,不管一条规则具有多高的权重,如果没有其他规则能应用于这个继承元素,那么它也只是个被继承的规则而已,举例说明。

样式定义:

body {background:pink;}li {color:gray;}ul white{color:white;}

应用举例代码:

<ul>  <li>举例列表一</li>  <li>举例列表二</li>  <li>举例列表三</li>  <li>举例列表四</li></ul>

结果:

为什么我们在ul里面设置了颜色为白色,但是显示出来的颜色却变成了灰色呢?因为带选择符li的显式声明的权值比从ul white规则那里继承过来的权值要大,所以每个列表项都是灰色的。所以在设置的时候要注意一下选择符的优先级。

CSS的继承是我们在写CSS样式时最容易出现的错误,我们要注意以上的一些内容,避免自己的样式显示不出来,又找不到问题。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-11-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档