CSS三种引入方式：内联、页级、外联

Posted on by mannuan One min read

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的区别：

link语法格式中，rel指的是关联(relation)，type指的是类型，href指的是链接文件路径。

link的作用主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系等。

(2)@import:

@import语法格式务必写在style标签中，后直接加文件路径即可。

@import作用在CSS文件和页面中，可以在一个CSS文件中引入其他的CSS文件，例如在index.css文件中引入其他CSS文件的样式，整合在一起后，再在index.html中调用一次即可，在实际项目中经常使用，方便管理和维护。

(3)二者加载顺序影响

HTML加载过程：

1) 加载HTML-DOM结构

2)CSS和JS

3)图片和多媒体

4)加载事件触发

link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。

在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。