CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
样式对网页中元素位置的排版进行像素级精确控制
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。CSS样式表极大的提高了工作效率，通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
当代浏览器都支持 CSS 。
仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护。
使用CSS可以使内容与表现分离，有了CSS，网页的内容(XHMTL)与表现就可以分开了。
使用CSS可以减少网页的代码量，增加网页的浏览速度。
有三种方法可以在站点网页上使用样式表：
1. 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
2. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
3. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式
通常保存在外部的独立的.css文件（该文件不属于任何页面文件）可以在多个页面中使用同一个CSS样式表。通过在任何的页面文件中引用.css文件，你可以设置具有一致风格的多个页面。
样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
一些经验法则：
以下是对于上图的解释：
https://www.w3cschool.cn/codecamp/override-styles-in-subsequent-css.html#?solution=%3Cstyle%3E%0Abody%20%7B%0Abackground-color%3A%20black%3B%0Afont-family%3A%20Monospace%3B%0Acolor%3A%20green%3B%0A%7D%0A%0A.pink-text%20%7B%0Acolor%3A%20pink%3B%0A%7D%0A.blue-text%7B%0A%20%20%20%20color%3Ablue%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Ch1%20class%3D%22pink-text%20blue-text%22%3EHello%20World!%3C%2Fh1%3E%0A
注意：
在 HTML元素中列出这些 class 的顺序并不重要。然而，<style> 部分中的 class 声明的顺序是重要的，第二个声明将始终优先于第一个声明。
原因：浏览器是从上到下读取CSS。这意味着，如果发生冲突，浏览器将使用最后的任何CSS声明。
而id属性始终是具有更高的优先级,id属性声明在class之上或之下无关紧要。
在许多情况下，您将使用CSS库。这些可能会意外覆盖您自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时，可以使用!important。
body {background:#ffffff url(‘img_tree.png‘) no-repeat right top;}
当使用简写属性时，属性值的顺序为：
原文：https://www.cnblogs.com/jiamian/p/10850754.html