深入学习CSS进阶（一） | 青训营笔记

阿雄_肖迷笛
102 阅读4分钟

这是我参与「第四届青训营」笔记创作活动的的第2天！

本期重新打卡学习CSS进阶（一）部分，进行查漏补缺

1. 选择器权重

  • 内联 - 1000

  • id - 100

  • class - 10， 伪类 - 10，属性 - 10

  • 标签 - 1， 伪元素 - 1

  • 相邻兄弟选择器 - 0，子选择器 - 0，后代选择器 - 0，通配选择器 - 0

2. 选择器特异度

特异度判定标准（按选择器权重理解）

#(id) -------- .(类、伪类) -------- E(元素、伪元素)

1. #nav .list li a:link
2. .hd ul .links a

如上述例子

(1)中 => id选择器数量为1，（伪）类选择器数量为2（.link, :link），（伪）元素选择器数量为2（li, a） ===> 特异度为 122

(2)中 => id选择器数量为0，（伪）类选择器数量为2（.hd, .links），（伪）元素选择器数量为2（ul, a） ===> 特异度为 22

END: 所以(1)的优先级高于(2)

3. CSS中可继承与不可继承属性

本点内容来源于网络

一、无继承性的属性

  1. display：规定元素应该生成的框的类型
  2. 文本属性：
  • vertical-align：垂直文本对齐
  • text-decoration：规定添加到文本的装饰
  • text-shadow：文本阴影效果
  • white-space：空白符的处理
  • unicode-bidi：设置文本的方向
  1. 盒子模型的属性：width、height、margin、border、padding
  2. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
  3. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
  4. 生成内容属性：content、counter-reset、counter-increment
  5. 轮廓样式属性：outline-style、outline-width、outline-color、outline
  6. 页面样式属性：size、page-break-before、page-break-after
  7. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

  1. 字体系列属性
  • font-family：字体系列
  • font-weight：字体的粗细
  • font-size：字体的大小
  • font-style：字体的风格
  1. 文本系列属性
  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：单词之间的间距
  • letter-spacing：中文或者字母之间的间距
  • text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
  • color：文本颜色
  1. 元素可见性
  • visibility：控制元素显示隐藏
  1. 列表布局属性
  • list-style：列表风格，包括list-style-type、list-style-image等
  1. 光标属性
  • cursor：光标显示为何种形态

对于不可继承的属性可以通过加入inherit进行显式继承

4. CSS求值过程

  1. 【DOM树】 + 【样式规则】 👉 浏览器对HTML解析成DOM树，把样式搜集起来成为样式规则

  2. 【filtering】 👉 对应用到这个页面的规则如下条件进行筛选：选择器匹配、属性有效、符合当前的media等

  • 在此阶段可以获得一个声明值(Declared Values)，即一个元素可能有多个声明值，如p {font-size: 16px;}和p.text {font-size: 1.2em;}
  1. 【cascading】 👉 决定用哪个声明值，按照其来源、!important、选择器特异性、书写顺序找出一个优先级最高的属性值
  • 在此阶段将得到层叠值(Cascaded Value)，在层叠过程中，优先级最高的那个值如p.text {font-size: 1.2em;}
  1. 【defaulting】 👉 如果层叠值为空时，使用继承或初始值
  • 在此阶段将得到指定值(Specified Value)，经过cascading和defaulting两个阶段，选择出有且之只有一个指定值
  1. 【resolving】 👉 前述的指定值（比如相对值1.2em、图片的相对路径）还不能直接能用来做浏览器渲染，此阶段将相对值转成绝对值
  • 在此阶段将得到计算值(Computed Value)，在浏览器不进行实际布局时候的情况下所能得到的最具体的值。比如60%不会在此阶段计算，需要依赖于实际用户浏览器的宽度，将在下一阶段进行
  1. 【formatting】 👉 将计算值进一步转换，比如将关键字（initial、inherit）、百分比转成绝对值
  • 在此阶段将得到使用值(Used Value)，进行实际布局时能使用的值，不会再有相对值或关键字。但比如400.2px这种精度的值无法直接使用

  1. 【constraining】 👉 如将小数像素进行四舍五入转成整数，受限于如max-width限制算出的width的值

  2. 【实际值】 👉 渲染时实际生效的值，比如400px

avatar
文章
阅读
粉丝