w3c系列之CSS(三):CSS属性是如何被应用到元素上的

简介:

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")

搞了这么久,终于要应用到生产了,这里还有一个环境限制。我们之前得到的font-size使用值为10px,是不是意味着最终就能让p标签的文字以10px大小显示呢?当然不是,chrome所能设置的最小字体为12px,所以最终我们看到的并不是font-size:10px效果,而是font-size:12px,这就是环境限制。


上面4步只是应用属性值得一个大概步骤,其实在得到指定值时需要考虑许多因素,比如UA,用户,以及作者样式间关系,以及各选择器优先级之间的关系。有关优先级的问题在精通css(3)-优先级那些事儿里已经写的很清楚了,这里就不赘述了。
看完这章总体上对CSS属性值的设定流程有了大致的了解,更加深入的内容后续满满呈上。



相关文章
|
10天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
63 3
|
24天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
20 1
|
25天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
33 2
|
1月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
24天前
|
前端开发
css简写属性
css简写属性
26 0
|
27天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
25 0
|
1月前
|
前端开发 开发者 UED
CSS技术的演变与应用
【10月更文挑战第11天】CSS技术的演变与应用
|
1月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
16 0
|
1月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
34 0
|
1月前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
47 0
下一篇
无影云桌面