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属性值的设定流程有了大致的了解,更加深入的内容后续满满呈上。



相关文章
|
2月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
347 60
|
2月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
68 7
|
2月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
33 5
|
2月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
47 4
|
2月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
39 2
|
2月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
71 1
|
2月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
42 1
|
2月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
54 2
|
2月前
|
前端开发
css简写属性
css简写属性
36 0

热门文章

最新文章