360FED课程 - CSS

大佬为什么是大佬？

前端 CSS

2018/9/8

3分钟阅读

css

cascading stylesheet 级联样式表

Level 版本

CSS Level 1（废弃
CSS Level 2 (CSS 2.2 完整规范)
CSS Level 3（在 2.2 的基础上增加新模块特性
- Color Module Level 3
- Selectors Level 3
- Media Queries
- Fonts Level 3

选择器

简单

通配 *
标签 E
类 .class
id #id

属性选择器 [ ]

/* 具有某个属性 */
[disabled]

/* 属性为指定的值 */
[type="checkbox"]

/* 属性值包含某个字符串 */
[href*="example"]

/* 属性值以某个字符串开头 */
[href^="http:"]

/* 属性值以某个字符串结束 */
[href$="jpg"]

/* 属性值以空格分割后包含某个字符串 */
[lang~＝"zh-cn"]/* class选择器的实现机制 */

伪类

/* 动态性伪类，根据状态选择 */
a:link    { ... }       /* 未访问过的链接 */
a:visited { ... }       /* 已访问过的链接 */

a:hover   { ... }       /* 鼠标移到链接上的样式 */
a:active  { ... }       /* 鼠标在连接上按下时的样式 */
a:focus   { ... }       /* 获得焦点时的样式 */

input:disabled { ... }  /* 禁用时的样式 */
input:checked { ... }   /* 选中时的样式 */
                        /*利用:checked来做某些toggle组件状态转换*/

/* 结构性伪类 */
:first-child
:last-child
:nth-child(2n+1)

:first-of-type
:last-of-type
div:nth-of-type(2n+1)   /*对nth-child()增加类型限制*/

:empty

组合性选择器

后代 E F
父子 E>F
兄弟 E~F
相邻兄弟 E+F

伪元素

::before
::after
::first-letter
::first-line

优先级/特异度 Specificity

!important > 内联 > id > （伪）类 > （伪）元素
覆盖：同样优先级：后面写的覆盖前面写的
复合选择器：从优先级高的选择器的数量开始比较

样式来源

页面开发者
用户设置（浏览器可以指定一个本地 CSS 文件，打开所有页面时自动加载
浏览器预设
- Mozilla Firefox 预设样式
- Google Chrome 预设样式
优先级：开发者 > 用户设置 > 浏览器预设
加了!important 的优先级：用户 important > 开发者 important > 开发者 > 用户设置 > 浏览器预设

默认值策略 Defaulting

继承

某些属性若不指定值，会自动继承父元素的！！！【计算值】

显示继承

html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
  /* 优点是有某一块都要设置为content-box时，只需要设置其最外层元素，不需要全设置 */
}
#xxx {
  box-sizing: content-box;
}

初始值 initial

CSS 中，每个属性都有一个初始值
background-color 的初始值为 transparent
margin-left 的初始值为 0，font-size 是 16px，line-height 是 1.2，但根据 font-family 而不同
可以显式重置为初始值，比如 background-color: initial
可以上 mdn 查初始值

CSS 求值过程

一个令人疑惑的很皮的 CSS 求值例子

<article>
  <h1>卡尔斯巴德洞窟</h1>
  <p>
    卡尔斯巴德洞窟（Carlsbad Caverns）是美国的一座国家公园，
    位于新墨西哥州东南部。游客可以通过天然入口徒步进入，也可以
    通过电梯直接到达230米的洞穴深处。
  </p>
</article>

<style>
  body {
    margin: 0;
  }
  article {
    line-height: 150%;
  }
  h1 {
    font-size: 40px; /*最终实际的line-height值为24px*/
  }
  p {
    font-size: 14px; /*最终实际的line-height值为24px*/
  }
</style>

<style>
  body {
    margin: 0;
  }
  article {
    line-height: 1.5;
  }
  h1 {
    font-size: 40px; /*最终实际的line-height值为60px*/
  }
  p {
    font-size: 14px; /*最终实际的line-height值为21px*/
  }
</style>

<!--
    原因：
    设为150%时，子元素继承前，父元素的line-height=150%会先被计算（resolving），得到一个绝对值，被计算为16px(默认的font-size值)*1.5=24px，子元素继承到的值是24px

    设为1.5时，子元素继承前，父元素在执行resolving时，1.5是绝对值，不会被转换，所以子元素继承到值1.5，后面再根据自己的font-size*1.5计算line-height

    总结：子元素继承到的是父元素的 计算值（一个绝对值）
-->

CSS 求值详细过程

filtering：有效选择器有效属性值符合 media ，筛选出所有声明值 Declared Values
cascading：选出优先级最高的一条声明，得到层叠值 Cascaded Value
defaulting：当层叠值为空时，用继承 | 初始值，得到指定值 Specified Value
resolving：将相对值、关键字转化为绝对值，如 em 转换为 px，%被转换为 px，相对路径转换为绝对路径，得到计算值 Computed Value
formatting:将计算值进一步转换，比如百分比、关键字转换为绝对值，得到使用值 Used Value
constraining：将小数像素转为整数，得到实际值