1、CSS引入方式

1、行内样式

<!--  在html文件的标签中定义 -->
<p style="color:red;">行内样式（文字红色）</p>

2、内嵌样式

<!--  在html文件的head标签中定义 -->
<head>
	<style type="text/css">
	    p {
	        color:red;
	    }
	</style>
</head>


<body>
	<p>内嵌样式（文字红色）</p>
</body>

3、链接样式

demo.html

<!--  demo.html -->
<head>
	<link rel="stylesheet" style="text/css" href="style.css" />
</head>


<body>
	<p>链接样式（文字红色）</p>
</body>

style.css

/* style.css  */
@charset "utf-8"

p {
	color:red;
}

4、导入样式

demo.html

<!--  demo.html -->
<head>
	<style type="text/css">
	    @import url(style.css);
	</style>
</head>


<body>
	<p>导入样式（文字红色）</p>
</body>

style.css

/* style.css  */
@charset "utf-8"

p {
	color:red;
}

2、优先级

样式可以被继承与覆盖，
继承类似于集合的全集的概念，即包含了所有被定义的样式的集合。
当相同的样式设置出现重复时，通过以下优先级进行覆盖：
以下优先级从低到高：

(1).浏览器样式（元素自身携带的样式）
(2).链接样式（使用<link>引入的样式）
(3).内嵌样式（使用<style>元素设置）
(4).行内样式（使用 style 属性设置）

也就是说在标签内定义的优先级最高，其次<head>中<style>定义的，其次是外部的。
<head>标签中如果外部引入在<style>标签之前引入，那么<style>标签将会覆盖外部引入相同的部分，反之亦然。

	color: green !important;