请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 140|回复: 5

CSS的继承性探讨

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-25 22:31:51 | 显示全部楼层 |阅读模式

CSS是层叠样式表(Cascading Style Sheets)的简称,它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,很少没有听说过CSS了吧,因为在制作网页过程中我们经常需要用到。

所谓CSS的继续是指被包在内部的标签将拥有外部标签的样式性质。继续特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继续也有很多规则,应用的时候轻易让人迷惑,今天就专门和大家聊聊这方面的应用。

一、继续

CSS的一个主要特征就是继续,它是依靠于祖先-后代的关系的。继续是一种机制,它答应样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明:

样式定义:

body{color:red;}

应用举例代码:

<p>CSS的<strong>层叠和继续</strong>深入探讨</p>

这段代码的应用结果是:“CSS的层叠和继续深入探讨”这段话是红颜色的,“层叠和继续”由于应用了strong元素,所以是粗体。这很符合制作者的意图,也是为什么继续是CSS的一部分的原因。

二、CSS继续的局限性

在CSS中,继续是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继续也有其局限性。

首先,有些属性是不能继续的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继续性。多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都是不能继续的。

三、继续中轻易引起的错误

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

body{color:blue}

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

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

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

四、多种样式混合应用

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

样式定义:

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

应用举例代码:

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

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

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

统计选择符中的id属性个数。

统计选择符中的class属性个数。

统计选择符中的html标记名格式。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注重,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很轻易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表:

h1 {color:blue;}特性值为:1

p em {color:purple;}特性值为:2

.apple {red;}  特性值为:10

p.bright {color:yellow;} 特性值为:11

p.bright em.dark {color:brown;}  特性值为:22

#id316 {color:yellow}  特性值为:100

从上表我们可以看出#id316具有更高的非凡性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。


回复

使用道具 举报

0

主题

775

帖子

783

积分

高级会员

Rank: 4

积分
783
发表于 2016-3-5 22:24:02 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

0

主题

957

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2016-3-20 16:07:17 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

0

主题

864

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2017-5-3 16:25:53 | 显示全部楼层
顶顶
回复 支持 反对

使用道具 举报

3

主题

986

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2018-2-28 14:34:45 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

0

主题

864

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2018-11-8 20:05:20 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-21 01:38 , Processed in 0.211994 second(s), 27 queries .

快速回复 返回顶部 返回列表