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。这些属性的顺序则是先水平,后垂直。

未完待续

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

You’ve successfully subscribed to Skyward
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.