CSS基础知识（下）

3.层叠

稍微复杂的样式表中都可能存在两条甚至多条规则同时选择一个元素的情况。CSS通过一种叫作层叠（cascade）的机制来处理这种冲突。

层叠机制的原理是为规则赋予不同的重要程度。最重要的是作者样式表，即由网站开发者所写的样式。其次是用户样式表，用户可以通过浏览器的设置选项，为网页应用自己的样式。排在最后的是浏览器（或用户代码）的默认样式表，它们一般都会被作者样式表覆盖掉。

CSS允许用户使用!important覆盖任何规则。

层叠机制的重要性级别从高到低：

标注为!important的用户样式
标注为!important的作者样式
作者样式
用户样式
浏览器的默认样式

在此基础上，规则再按选择符的特殊性排序。特殊性高的选择符会覆盖特殊性低的选择符。如果两条规则的特殊性相等，则后定义的规则优先。

4.特殊性

为了量化规则的特殊性，每种选择符都对应着一个数值。

一个规则的特殊性就表示为其每个选择符的累加数值。

特殊性由高到低：

行内样式
ID选择符的数目
类（class）选择符、伪类选择符及属性选择符的数目
类型（type）选择符和伪元素选择符的数目

如果两条规则拥有相等的特殊性，则优先应用后定义的规则，也就是层叠机制。

理解特殊性是写好CSS的关键，而控制特殊性规则是大型网站开发中最难处理的问题。利用特殊性，可以先为公用元素设置默认样式，然后在更特殊的元素上覆盖这些样式。

我们应该简化选择符、降低特殊性。

5.继承

任何直接应用给元素的样式都会覆盖继承的样式，因为继承的样式没有任何特殊性。

继承是很有用的机制，有了它就可以避免给一个元素的所有后代重复应用相同的样式。

6.为文档应用样式

6.1 link与style元素

把样式放在style元素中。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            body {

                color: black;

            }

        </style>

    </head>

    <body>

        <p>A general intro</p>

    </body>

</html>

为了让样式表能在多个页面中重用，通常最好把它保存到一个外部文件中。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

        </style>

        <link href="base.css" rel="stylesheet"> <!-- 外部文件 -->

    </head>

    <body>

        <p>A general intro</p>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            @import url("base.css"); /* 使用@import加载外部文件 */

        </style>

    </head>

    <body>

        <p>A general intro</p>

    </body>

</html>

如果为某个元素应用样式时，有两个或更多特殊性相等的规则互相竞争，则后声明的样式胜出。

6.2 性能

选择以什么方式把CSS加载到页面中，决定了浏览器显示页面的速度。

1.减少HTTP请求

2.压缩和缓存内容

3.不让浏览器渲染阻塞JavaScript

如果你在HTML文档的<head>元素中加入了<script>元素，浏览器必须先把它链接的脚本下载下来，然后再向用户显示网页内容。换句话说，这种情况下HTML和CSS解析完全被下载以及执行脚本阻断了，也就是所谓的“渲染阻塞”。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

        </style>

    </head>

    <body>

        <!-- 最后加载JavaScript以避免渲染阻塞 -->

        <script src="core.js"></script>

    </body>

</html>

参考资料：

《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德