|
CSS 中的声明，由 CSS 的特性和值，中间以 ":" 隔开组成。
我们可以使用 CSS 选择器，为选中的元素设置需要的样式。
在介绍 CSS 的特性和值的时候，特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值，不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正，也就是浏览器容错。
那么，有没有想过，在我们给予一个特性正确的值的情况下，浏览器应该怎样处理呢？是否最终你看到的就是你设置的值呢？答案是否定的！
当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree )，那么，它必须为文档树中的每一个元素，根据目标媒介类型所适用的每一个特性，指定一个值。
而开发者给某个元素的 CSS 特性设置某个值，到这个元素的特性值被计算渲染，也就是得到最终的值，需要经过四步计算：
（1）通过指定值 ( specified value ) 确定这个值；
（2）将这个值分解为一个可以用来继承的值，即计算后的值 ( computed value )；
（3）必要情况下把计算后的值转换成一个绝对的值，即使用值 ( used value )
（4）根据显示环境的限制，改变使用值以使之能够显示在用户端，最后这个值被称作实际值 ( actual value )。
这些值的计算过程类似工资的计算过程，你的应得工资是一个设置值，实际工资还要减掉你的缺勤，保险，个人所得税等……实际计算出来的数字才是应用到你身上的具体数额。
下面来详细的介绍这四个步骤的四种值。
一、指定值
一般来讲，开发者设定的值，即为指定值，但是最终这个值的确定还需考虑其他几个方面( 按照优先顺序排列 )。
1.层叠顺序
首先考虑有层叠顺序的情况，即开发者明确了设置了 CSS 特性的值。
层叠顺序会影响开发者设定的值，所以，应该根据层叠顺序来确定声明的优先级别，优先级高的声明才会起作用。关于层叠顺序，后续会有详细的说明。
例如，开发者在定义样式的时候，加了 '!important' 的声明要优于未加 '!important' 的声明。
CSS Code复制内容到剪贴板
div{
height : 100px;
height : 130px !important;
}
其中，带有 '!important' 的 height 声明才是 指定值。
2.继承( inheritance )
如果没有明确的设置这个值，那么会先考虑它是否继承了父元素的值。这时候指定值使用它父元素的值，通常是父元素的计算值。
例如：
XML/HTML Code复制内容到剪贴板
<p style="color:red;">The greet <em>is</em> good!</p>
EM 元素没有指定颜色，他将继承父元素的颜色用来显示字符串 "is"。因此，EM 元素是红色。EM 元素 'color' 特性的指定值在没有层叠影响的情况下，就是 "red"。
二、初始值
最后，在不存在以上两种情况的时候，使用元素的初始值。
如果不设置元素的 'width'，它的指定值就是 "auto"；对于 'font-size'，不设置的情况下，其指定值是 "medium"。
关于指定值在 JavaScript 中的获取方法，可以使用 "element.style.property" 语句模式：
CSS Code复制内容到剪贴板
<p id="container" style="color:red;">The headline <em id="sub">is</em> important!</p>
<div id="info"></div>
<script type="text/javascript">
window.onload = function() {
var container = document.getElementById("container");
var sub = document.getElementById("sub");
var info = document.getElementById("info");
info.innerHTML = "container width : " + container.style.width
+"<br/>container color : " + container.style.color
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
