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突然出来。