CSS引用方式有3种，三种分别为：外部引入、内部引入、行内样式，下面一 一进行介绍。
1.外部引入：CSS代码在一个独立的文件中，HTML通过Link标签引入到页面。
代码格式：<link rel=“stylesheet” href="../css/index.css">；
注：1.link标签是head的子元素；
2.link是空元素，用于引入外部资源；
2.内部引入：将CSS代码放入HTML文档中的style元素
代码格式：<style type="text/css">
p{
font-size(文字大小):10px;
}
</style>
3.行内样式：CSS代码写在某个开始标记的style属性中，不写选择器。
代码格式：<p style="属性值">元素内容</p>;
注:style所属的标签在body里；
样式层叠机制：
当有声明冲突时，浏览器会自动触发层叠机制。什么是声明冲突呢？通俗来说就是同一个样式的不同值应用到同一个标签，举个简单的例子：
相信小伙伴看到这个都知道结果是p标签的字体颜色为绿色，但为什么是绿色呢，这也就是今天要说的层叠机制。
首先说一下层叠的过程：1.比较优先级 2.比较特殊性 3.比较源次序，下面一 一进行介绍
1.比较优先级：用户样式表>作者样式表>浏览器的样式表
一个声明的优先级，与它的来源和重要性有关，
来源：
重要性：若属性值后跟上!improtant则表示这是一条重要声明，反之为普通声明，声明相同时，重要声明胜出，普通声明淘汰。将上方的例子修改：
一般在使用ui组件的时候，会常常用到重要声明。
2.比较特殊性：当发生冲突时，特殊性高的保留，特殊性低的淘汰。
特殊性从高到低：行内样式->ID选择器->类选择器->元素选择器->通配符选择器
一个声明的特殊性，取决于规则使用范围的大小，具体规则：每一次冲突的声明都会生成4个字母(a,b,c,d)，首先比较a，如果a相同，则比较b...以此类推。废话不多说，直接来看a,b,c,d具体是如何生成的
a：当声明是行内样式，则为1，否则为0
b：声明中ID选择器的个数
c：声明中类选择器、伪类选择器和属性选择器的个数和
d：声明中元素选择器、伪元素选择器的个数和
通配符选择器的特殊性为0，下面来个例子解释：
由于考虑到行内样式的特殊性最高以及id选择器的唯一性，所以就只考虑c和d的规则
相信小伙伴们都猜到了结果，
3.比较源次性：最后出现的声明胜出，其他的全部淘汰，这一条比较简单，就如同最开始的例子一样。
本人小白，根据自己理解写的，写的不对的地方麻烦大神指点