6.Assigning property values, Cascading, and Inheritance(属性值,级联和继承)自己的学习笔记,带有个人理解,欢迎指正

6.Assigning property values, Cascading, and Inheritance(属性值,级联和继承)

Specified, computed, and actual values

最后的属性值有4步,先有个指定值(specified),再把它解析成能继承的值(the computer value)再把它解析成使用是的值(used name)再把根据应用环境解析成实际应用的值(actual value)

Specified values

指定值的优先级顺序:

  1. 如果级联有值,就用它
  2. 如果继承有值,并且不是文档树的根元素,就用它父元素的computer values。
  3. 否则就用初始值,每个元素的初始值是在定义时候决定的。

computer values

  • 在级联的时候,specified value 会被处理成computer values。例如,url是绝对的单位,并且em和ex单位是被计算成像素或者是绝对的长度,计算一个值不需要浏览器渲染文档。

  • 计算机不能计算的url 的绝对长度 computed value 是specialfied value

  • computer value 甚至存在在属性没有应用的时候,作为被apploes to 行的定义,然而,许多性质可能定义了computered value 依赖性值怎么应用与标签的。

used value

  • 一些值尽量不在渲染的时候确定,但是如果有一些比如百分比的值,必须在文档被应用的时候才能确定。4

actual value

最后实际应用的值

inheritance

  • 每一个属性都规定了是否要继承值
  • 当继承时,继承的是computed value
  • 如果浏览器没有那个尺寸,最后的实际值是近似的值。
  • 有些值可以通过inherit来强制继承

important rule

  • @important rule 优先级最高,除了 @charset rule
  • @important rule 用法
    • @import url(“CSS路径”) 媒体类型列表(可选) 导入外部CSS样式表

the cascade

  • 样式表可能有三个来源:作者,用户和浏览器
  1. author:
    1. 作者指定样式表根据文档语言的标准,例如,在html里面,样式表可能被包括在文档或者是外部链接。
  2. user :
    1. user能够指定对每个文档特别的样式,例如,user指定了包含样式表的文件,或者浏览器可能提供接口或者界面。
  3. user agent
    1. 浏览器一致性必须应用于不符合标准的样式表里面。
  4. 这三个东西会根据权重交互

cascading order

级联顺序

  1. 如果有匹配的选择器样式,就应用
  2. 根据优先级升序
    1. user agent declarations
    2. user normal declarations
    3. author normal declarations
    4. author important declarations
    5. user important declarations
  3. 如果两个权重一样,那么应用后面写的

!important rules

calculating a selector ’ s specificity

  • count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)直接用style指定了的话,a=1,没有a=0
  • count the number of ID attributes in the selector (= b)选择器包含#id的次数为b
  • count the number of other attributes and pseudo-classes in the selector (= c)选择器中包含属性或者伪类的次数为c
  • count the number of element names and pseudo-elements in the selector (= d)选择器包含元素名或者伪元素的个数为d的值
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

非css属性的表现属性的优先级

例如akign color,

UA如果至此文档中的表现属性,那么这些属性会被转换成0优先级的css规则,被看作作者定义的规则,这样他们就好共存了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值