1、内联CSS
内联css也称为行内css或者行级css，它直接在标签内引入。
优点：便捷、高效
缺点：不能够重用样式，代码行数多的时候不建议使用
<head>
<div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
</head>2、页级css
页级css也称为内部css，整体放在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>3、外联CSS
外联css也称为外部css，在实际项目中通常使用此方式，在页面中使用link或@import引入。
优点：可维护性好
缺点：外联css是一个单独的文件，可以作用于多个页面，在修改的时候修改某一块区域，达到多个页面的样式变更，相比于内联css和页级css，省去了对每个页面修改，提高了开发效率。
接下来说下link和@import的区别：
1）link：<link rel="stylesheet" type="text/css" href=".css"/>
link语法中，rel是关联（relation），type指的是类型，href指的是引入的文件路径
link的作用主要是引入css和网页图标，告知搜索引擎，网页之间的关系。
（link引入网页图标：<link rel="icon" href=".css"/>）
2) @import：<style>@import url(".css")</style>
@import语法务必写在style标签中，后面直接加文件路径。
@import作用在css文件和页面中，可以在一个css文件引入其他的css文件，整合到一起在页面引入一次即可。
3）二者加载顺序影响
html加载过程：（1）html-dom结构 （2）css和js （3）图片和多媒体 （4）加载事件
link：无论放到哪个位置，都是一边加载数据，一边优化，视觉感受好。
@import：先加载数据，再加载样式，如果网速不佳，可能造成数据出来，而样式一点点加载出来的效果。
link永远比@import的优先级高。
4522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
