Beyond awesome | 越而胜己

重修 CSS:层叠、优先级和继承

前言

作为一个 CS 生,一直被认为网页设计不是我的本职工作。因此,我的网页设计基础依然停留在初中时候搞 Bootstrap + jQuery 那一套;至于 Bootstrap 文档里提及的东西之外,我就一窍不通了。之后也尝试过很多次系统学习前端技术,却经常发现自己做完了教程但是仍然做不出好看的东西,尤其是对 CSS 一直一知半解。看各路大佬们自己做的博客主题,又跃跃欲试了。

这次希望从基础入手,彻底搞定 CSS。正好图灵社区的新书《深入解析 CSS》上线,立刻买下开始学习。这个系列的笔记主要提炼书中重要的内容,以作为日后参考。

今天先讲一讲基础中的基础,来自书中第一部分《基础回顾》的第一章《层叠、优先级和继承》。

层叠

CSS 的全称是 Cascading Style Sheets(层叠样式表),那么其关键就在于这个形容词 “cascading”。在 CSS 中,常常会有许多“冲突”的规则,而解决冲突的优先级规则即是“层叠”。

“层叠”的规则是根据以下三种条件以此判断的:

  1. 样式表的来源:作者(author)样式 > 用户代理(user agent)样式,而作者样式中含 !important 的样式优先级最高。
  2. 选择器(selector)优先级:行内(inline)样式优先级最高。在 CSS 选择器定义的样式中也有很多复杂的规则,可以概括为“越具体越重要”。
    a) id 多的选择器优先级高。
    b) 如果 id 数量相同,class 多的选择器优先级高。
    c) 如果 class 数量相同,tag 多的选择器优先级高。
  3. 源码顺序:如果以上规则仍然不能区分优先级,那么较晚引入的选择器优先级更高(即覆盖了前面定义的样式)。

由此,CSS 优先级的定义得到了明确。以后不需要再气急败坏地在自定义的 CSS 中加 !important 了!

继承

继承有别于层叠。层叠指的是冲突规则的解决,而继承指的是缺省值的确定。如果某个元素的某个属性没有层叠值,那么它的值可能会继承某个祖先的值。

并不是所有属性都能被继承。能被继承的属性主要是文本相关的属性(具体不列出)、列表属性(list-style-*)以及表格的边框属性(border-collapseborder-spacing)。在 Chrome 的开发者工具中可以查看任意元素的层叠值和继承值。被层叠规则覆盖的属性会被划掉。

特殊值 inheritinitial

这两个特殊值可以赋予任意属性。inherit 可以强制从祖先元素继承任意属性,而 initial 则是将一个属性重置为默认值。

简写属性

有些属性可以简写,比如 background- 开头的一系列属性可以简写为 background 属性的多个值。含有多个值的属性有缺省值,即如果只提供几个值,其他值会被设为缺省。有时候这并不是我们想要的结果,所以需要多加小心。

简写属性的值的顺序有时候很重要。比如对于 marginpadding 来说,四个值的顺序分别是 toprightbottomleft,可以记为 TRouBLe。当不足四个值时,有些值会被自动设置:

  • 如果只有一个值,那上下左右都会被设为这个值。
  • 如果只有两个值,那第一个值用于上下,第二个值用于左右。
  • 如果只有三个值,那第一个值用于上,第二个值用于左右,第三个值用于下。

另外还有一些属性只接收两个值,比如 background-positionbox-shadowtext-shadow。这些属性的顺序则是先水平,后垂直。

未完待续

下一篇笔记将简要讲讲相对单位。