css引入方式
1、内部CSS样式
在html文件的head部分，用style标签包裹。作用范围和字面意思相同，仅限于本页面的元素
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
width: 65px;
height: 20px;
border: 1px solid;
background: greenyellow;
}
</style>
</head>
2、内联CSS样式
<p style="color: black">Jay</p>
3. 外联CSS样式
外联CSS【外部CSS】，页面中使用link或者@import引入即可，外联CSS是一个单独的文件。
接下来具体说说link和@import的区别：
(1)链接方式: <link rel="stylesheet" type="text/css" href="*.css" />
说明：
- type：规定被链接文档的类型，这是表示被链接的文档是css样式表。
- rel：定义当前文档与被链接的文档之间的关系。
- href：表示外部css样式表的路径，包括文件路径和css文件名。
link的作用主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系等。
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css3.css" type="text/css" rel="stylesheet">
</head>
(2)导入方式: <style>@import url("*.css");</style>
@import必须在style标签中，@import可以在页面中引入CSS文件，也可以在CSS文件中引入其他的CSS文件。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "css3.css";
</style>
</head>
<!--导入式-->
<style type="text/css">
@import url("css文件路径");
</style>
(3)二者加载顺序影响
HTML加载过程：1) 加载HTML-DOM结构
2)CSS和JS
3)图片和多媒体
4)加载事件触发
link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。
在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。
link是html加载前就引用，等dom树生成好后和样式表结合生成渲染树，浏览器再开始渲染页面，不会出现闪烁。
@import 先等网页加载完再引入样式，如果网页足够大，则可能出现闪烁，就是漫长的无样式网页加载之后，css突然出来。
四、CSS样式的优先级
优先级
- 行内样式>内部样式表>外部样式表
- 因为HTML中代码的顺序是从上往下执行的，所以说内部样式表和外部样式表没有优先级谁高谁低之分，是按照就近原则执行的，哪种样式最后加载，就以哪种样式为准。
- 同理，引入外部样式表的两种方式(链接式和导入式)的优先级也是按照就近原则。
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red; text-align:right; font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
