CSS三种引入方式：内联、页级、外联
来源：http://www.cnblogs.com/ljwk/p/7136384.html?utm_source=itdadao&utm_medium=referral
1.内联CSS
内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。
<body>
<div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
</body>
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和网页图标，指示告知搜索引擎，网页之间的关系等。
2. @import:<style>@import url("*.css");</style>
@import语法格式务必写在style标签中，后直接加文件路径即可。
@import作用在CSS文件和页面中，可以在一个CSS文件中引入其他的CSS文件，例如在index.css文件中引入其他CSS文件的样式，整合在一起后，再在index.html中调用一次即可，在实际项目中经常使用，方便管理和维护。
3 二者加载顺序影响
HTML加载过程：
-
加载HTML-DOM结构
-
CSS和JS
-
图片和多媒体
-
加载事件触发
link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。
在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。
网友评论