从CSS 样式代码插入的形式来看基本可以分为以下3种：
内联式、嵌入式和外联式三种
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下
<p style="color:red";font-size:12px>这是内联式</p>
嵌入式，就是可以把css样式代码写在<style type="text/css"> </style>标签之间
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color:red;
}
</style>
</head>
外联式，写在单独的一个文件中
外联式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（而不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
三种样式的优先级：内联式 > 嵌入式 > 外联式，但是嵌入式>外联式有一个前提：嵌入式css样式的位置一定在外部式的后面。
其实总结来说，就是--就近原则（离被设置元素越近，优先级别越高）。
再来说一下选择器的优先级
先说说 CSS 7 种基础的选择器
ID 选择器， 如 #id{}
类选择器， 如 .class{}
属性选择器， 如 a[href="segmentfault.com"]{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 *{}
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 优先规则：
最近的祖先样式比其他祖先样式优先级高
"直接样式"比"祖先样式"优先级高。
还有一点使用!important的css定义是拥有最高的优先级
