css层叠最前面包含那两层意思

来源：蜘蛛抓取(WebSpider) 时间：2016-11-24 23:57 标签： css图片层叠
CSS E F 包含选择符示例，包含关系的层叠 --
梦之都 , 示例，包含关系的层叠
梦之都的 蓝色文字 红色文字
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS E F 包含选择符示例，包含关系的层叠&/title&
&style type=&text/css& media=&all&&
&h1&梦之都的 &em&蓝色文字&/em& 红色文字&/h1&CSS继承与层叠的介绍
您现在的位置：&&>>&&>>&&>>&&>>&正文
CSS继承与层叠的介绍
&&&热&&&&&★★★
CSS继承与层叠的介绍
作者： 文章来源： 点击数：876 更新时间： 22:05:56
一、CSS继承
所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:R那么他内部的元素如果没有其他的规则设置，也都会变成红色。继承得来的规则没有特殊性。下面看一个简单的例子：
Example Source Code&html xmlns=""&&head&&&& &title&CSS Cascade&/title&&&& &style type="text/css"&&&&& *{color:B}&&&& div{color:B}&&&& .imp{color:Red !}&&&& #content{color:G}&&&&& &/style&&/head&&body&&&div&Hello &span&&/span& &/div&&&div id="content"&&&& &p&Title&/p&&&& Content Goes Here.&&/div&&/body&&/html&
注意，第一行的Css并没有继承div的黑色，这是因为通配符的缘故。通配符的特殊性虽然是全0，但是还是比继承的特殊性要高。第二行展示了!important标记的作用。
二、CSS层叠
我们知道文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的，例如：
Example Source Code&html xmlns=""&&head&&&& &title&CSS Cascade&/title&&&& &style type="text/css"&&&& h1{color:R}&&& body h1{color:B}&&& &/style&&/head&&body&&h1&&/h1&&/body&&/html&
为此需要为每条规则制定特殊性，当发生冲突的时候必须选出一条最高特殊性的规则来应用。CSS规则的特殊性可以用4个整数来表示，例如0，0，0，0.计算规则如下：
Example Source Code对于规则中的每个ID选择符，特殊性加0，1，0，0对于规则中每个类选择符和属性选择符以及伪类，特殊性加0，0，1，0对于规则中的每个元素名或者伪元素，特殊性加0，0，0，1对于通配符，特殊性加0，0，0，0.对于内联规则，特殊性加 1，0，0，0　　&&& 最终得到结果就是这个规则的特殊性。两个特殊性的比较类似字符串大小的比较，是从左往右依次比较，第一个数字大的规则的特殊性高。上例中两条规则的特殊性分别是0，0，0，1 和 0,0,0,2，显然第二条胜出，因此最终字是蓝色的。　　&&& 注意，通配符的特殊性0,0,0,0看起来没有作用，实际上不是，还有一种没有特殊性的规则，0，0，0，0要比没有特殊性更特殊。　　&&& css还有一个!important标签，用来改变css规则的特殊性。实际上，在解析css规则特殊性的时候，是将具有!important的规则和没有此标签的规则利用上述方法分别计算特殊性，分别选出特殊性最高的规则。最终合并的时候，具有任何特殊性的带有!important标记的规则胜出。
文章录入：晴天&&&&责任编辑：晴天&
上一篇文章：
下一篇文章：
【字体： 】 【】【】【】【】【】
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
::发表评论::
　评论内容：
严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
用户需对自己在使用本网服务过程中的行为承担法律责任。
本站管理员有权保留或删除评论内容。
评论内容只代表网友个人观点，与本网站立场无关。
备案/许可证编号: 闽ICP备号　域名创建于2010年12月
版权: 一方阳光All Rights Reserved网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&正文
CSS的层叠和特殊性
书上说样式表处理冲突是：
作者样式优先与用户样式。
请教，什么是作者样式，那类算是用户样式。
1. a 作者样式指的是页面的作者在页面中加载的样式,就是我们平常制作网页时所称的样式表。
b 而读者样式是指浏览页面的用户通过浏览器向页面加载的自己需要的样式，在ie中可以通过“工具”&&“internet选项”&&“常规”&& “外观”&&“辅助功能”&&“用户样式表” 实现。假如使用Firefox，需要把规则添加到user.css文件。在Opera中，它是让用户选择用户定义样式表的文档下面的首选项。 在Safari中，它是高级首选项。这对于某些非凡群体的用户非凡有用，包括那些有视觉障碍的用户。例如，假如用户要求高对比度显示，用户样式表应该设置为默认的黑色背景、白色文本和大字体。
2. a 导入样式表是指用
&style& @import url("mycss.css"); &/style& 在页面中导入样式表，或者直接在css文件中用@import url("mycss.css"); 来加载的样式表
b 链接css 样式表 是指用&link href="mycss.css" type="text/css" rel="stylesheet" /&来在页面中加载的样式表
c 两种样式表都可以向页面中加入样式，但是在优先级上链接要高于导入。
3. 作者样式可能是导入css样式表也可能是链接样式表。用户样式表是链接式的。所以有时会和作者样式冲突。解决方法是加上!important 例如 body { font-size: 24pt ! } 来表示强调并优先。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：做网页的时候在div里放了一个别的网页的天气插件，但是点击了会跳到广告页面的，想去网上找个禁止div点击的方法，可是发现没有，用了js的方法好像也没有成功，后来觉得还是用两个层重叠的方法来阻止点击，虽然定位是有点麻烦
&div style="position:relative"&&& &div style="position:left:0;top:0"&&/div&&& &div style="position:left:0;top:0"&&/div&&/div&
relative是相对定位的意思。absolute是绝对定位，很奇妙少了一个都不行，但是放在一起就可以实现一个div中两个div重叠在一起。
.cn/css/css_positioning.asp这里是w3school里关于css的定位的一些说明
z-index:1 这个是决定两个层在一起的显示顺序，z-index的默认值是0，适合层多的时候用
阅读(...) 评论()

我要回帖

更多关于 css图片层叠 的文章

 

随机推荐