大漠驼铃

置身浩瀚的沙漠,方向最为重要,希望此blog能向大漠驼铃一样,给我方向和指引。
Java,Php,Shell,Python,服务器运维,大数据,SEO, 网站开发、运维,云服务技术支持,IM服务供应商, FreeSwitch搭建,技术支持等. 技术讨论QQ群:428622099
随笔 - 238, 文章 - 3, 评论 - 117, 引用 - 0
数据加载中……

CSS中的层叠和继承

元素被继承的原则:
1、影响元素的位置,边界,背景和边框的属性不会继承。
2、浏览器会使用它们自己的继承样式来格式化某些元素,比如标题(h1-h6)文字显示为粗体且字体较大,链接文字(a 元素)的颜色为蓝色等。这些元素相应的属性也不会继承它们祖先元素的属性。
3、当样式继承存在冲突时,采取就近原则。后代元素会继承距离自己最近的祖先元素的相应属性。

text-align:center在Firefox 浏览器中不起作用。如果使IE和Firefox中可以正确显示
margin-left:auto; margin-right:auto;

inhert继承
明确指定
div#menu{
border:2px solid black;
padding:5px;
background-color:#909090;
}
div#menu div{
border:inherit;
padding:inherit;
background-color:#DEDEDE;
}

border:inherit 明确指定继承父类的border

@import 规则

@import url("stylesheet1.css");
@import url("stylesheet2.css");

或者

@import "stylesheet1.css";
@import "stylesheet2.css";

@import 作用
<style type="text/css">
@import url('
1.css');
</style>
<!--[if lt IE 7]>
<style type="text/css">
@import url('
2.css');
</style>
<![endif]-->


CSS层叠:

确定度:多个样式直接应用到同一元素上的情况,例如:
<p id="para1" class="normal">test 确定度</p>
p{color:red;}
p#para1{
color:blue;
}
p.normal{
color:white;
}
body{
color:yellow;
}

显示的颜色确实是哪一个规则?

选择符的确定度由4位逗号相隔的数字组成,形式为0,0,0,0. 这里分别用a,b,c,d代表四位数。
1 若样式由元素style属性确定而不通过选择符,a=1,否则a=0;
2 计算id选择符的字数,赋给b
3 计算属性选择符或者伪类的个数,赋给C
3计算类型选择符或者伪类的个数,赋给D
只要通过比较确定度的大小就可以判断出优先级的最高规则,比较方式是从左端的a位开始逐位比较,数值较大的确定度最高。

!import 声明
声音该属性比其他属性的优先级高

posted on 2010-03-10 20:12 草原上的骆驼 阅读(362) 评论(0)  编辑  收藏 所属分类: CSS


只有注册用户登录后才能发表评论。


网站导航: