w3c系列之CSS(三):CSS属性是如何被应用到元素上的
来源:互联网 发布:java中io流总结 编辑:程序博客网 时间:2024/05/08 18:16
w3c上第五章是讲CSS选择器的,可以去看精通CSS系列之选择器。本文讲的是第六章(Assigning property values, Cascading, and Inheritance)。
当浏览器为获取到的网页文档生成了document tree时,接下来要做的就是为每一个元素应用样式了。
浏览器在计算样式值的时候一般会经过以下四步计算:
STEP1.优先使用指定属性值(the "specified value")
首先使用指定的值(the "specified value"),比如下面这段文档中p的font-size为例:
<body> <p>hello</p></body>使用指定值时浏览器会遵循以下机制:
1.如果能通过层叠规则得到font-size的值,就直接用该值。显然上面没有任何CSS代码,所以无法利用cascade层叠规则;
2.如果没有指定,而且该属性可以继承,并且该元素不是文档树的根元素,那么就使用从父元素那边继承下来的值(这时候的值不叫"specified value"了,而是"computed value")。显然,font-size属性可以继承,并且p元素也不是文档树的根元素,但是p的父元素也没有指定值啊!这没法计算啊!
3.如果上面的条件都不满足,就使用属性的初始值。属性的初始值在属性定义的时候就给出了。font-size的默认值为medium,所以这里的hello字体大小应该为medium。不过这个medium到底是多大啊?个人认为应该就是UA设置的默认字体大小。理由:chrome中默认字体16px,而font-size:medium和font-size:16px效果完全相同。
STEP2.使用计算值 (the "computed value")
每个元素都应该有确定的属性,如果没有指定属性值,那么就只有按照一定的规则来计算出来值了。这种规则就是基于继承的规则。比如设置body{font-size:0.104in;},那么p的font-size经过计算也是0.104in。所以只要不是直接指定元素的属性值,都会使用到计算值。
这里就有个疑问了:上面的font-size:medium其实也没有具体的,最终结果呈现为font-size:16px是不是也是经过计算的呢?个人认为这应该算是浏览器内部设置的默认样式,并不算是一种计算值。
STEP3.得到使用值(the "used value")
由于使用媒体的不同,计算后的值通常要转成适用于目标媒体的“绝对值”,使之能用确实地在目标媒体上使用,我们称之为“used value”。比如要在屏幕上显示0.104in,因为现在的电脑屏幕都是按像素尺寸算的,所以需要将in转化为px才能显示(由于不同屏幕的ppi不同, 所以最终看到的长度有可能不一样)。
0.104in大概等于10px,所以得到的使用值为10px。
使用值就是完成计算值以及确定相关依赖之后得到的适用于目标媒体的值。完成计算值不用说了,那什么叫做确定相关依赖呢?比如你设置一个box的高度为50%,那么这个值只有在其父元素的高度确定之后才能计算,这就是相关依赖。
STEP4.根据实际环境应用实际值(the "actual value")
- w3c系列之CSS(三):CSS属性是如何被应用到元素上的
- w3c系列之CSS(四):深入理解盒模型
- 如何获得某个元素的css属性。
- Android中的属性,是怎么应用到控件上的(三)
- CSS之元素视图属性
- CSS属性的应用
- html+css+js系列之三 css的入门
- css块元素的 display 属性 inline-block 的应用
- w3c系列CSS之路(二):错误解析和基本数据类型
- w3c系列CSS之路(五):详解visual formatting model
- CSS篇——如何利用css让元素到另一个元素的后面
- CSS入门系列:第二部分 属性(三)
- CSS入门系列(四)CSS样式的结合应用
- BootStrap 教程 之 HTML5元素和CSS属性(02)
- 元素定位方式 之-----CSS属性定位
- CSS:元素定位之position属性
- 总结w3c的css知识点
- 如何获取到css文件里的相关属性
- Jobdu 题目1461:Tempter of the bone
- JAVA反射机制
- Android菜鸟的成长笔记(25)——可爱的小闹钟
- day3,page25,total105
- ExtJS4.2第一天---数据模型
- w3c系列之CSS(三):CSS属性是如何被应用到元素上的
- Android中使用ListView绘制自定义表格(2)
- 九度oj 题目1008:最短路径问题
- COM线程模型 - MTA接口 (传递MTA COM对象给STA套间线程)
- Lesson 4 Abstraction in computer science
- 如何修改MTK 6592 手机(如果华为荣耀3X系列)IMEI码
- 目标检测的图像特征提取之(二)LBP特征
- java内置锁synchronized的可重入性
- Android入门:Intent入门(1)