CSS引用方式及样式层叠机制

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.比较源次性：最后出现的声明胜出，其他的全部淘汰，这一条比较简单，就如同最开始的例子一样。
　　

本人小白，根据自己理解写的，写的不对的地方麻烦大神指点