首页 > 开发 > CSS > 正文

CSS中的指定值、初始值和计算值学习教程

2024-07-11 08:41:20
字体:
来源:转载
供稿:网友

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复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表