css引入的方式有哪些_四种css的引入方式与特点

在网页中css主要负责html文档的样式显示，目前css主要有4种引入方式：行内式、内嵌式、导入式、链接式。

1.行内式

行内式也叫内联样式，是指标记的style属性中设定CSS样式，这种方式没有体现出CSS的优势，不推荐使用。例如：

<div style="color: #ccc; width: 200px; height: 100px;"></div>

style定义的CSS样式直接嵌在HTML文档中，当项目中某个CSS样式出现问题(所谓的BUG)，开发者很难确定错误到底是出现在HTML中还是在CSS文件中，这会给开发者团队带来巨大的困扰。

2.内嵌式

HTML提供了style标签以控制页面的显示样式，style元素位于head标签内部，type属性指定CSS代码的文档类型。例如：

<style type="css/text">
.text{
     font-size: 20px;
     padding-left: o;
     margin: 0 auto;
} 
</style> 
<body>
    <div class="text"></div> 
</body>

这种方式和行内式【内联样式】一样，会造成代码混乱，不易查错，也会给文档加载带来巨大负担。

3.导入式

导入外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差别。导入外部样式单主要通过@import方式导入CSS文件，有两种导入方式。

a、在style元素中导入CSS文件

 <style type="text/css">    
     @import "CSS样式文件的绝对地址";
     @import url("样式文件的绝对地址");
 </style>

url可省略，所以只需指定样式单地址即可，在标准CSS的语法中，@import还有sMedia属性，用于指定CSS的可作用的设备，目前还没得到广泛的支持，所以sMedia可以不写。

b、在CSS文件中再导入CSS文件

/*某个CSS文件*/
@import "另一个CSS文件的地址";
.test{
     width: 100px;
     height: 100px;
     line-height: 20px;
     background-color: red; 
}

在CSS文件中再导入CSS文件，会给服务器造成太大的文件请求压力，最好不要这样做。 @import是由CSS提供的一种导入样式的方式，当页面被加载时，@import会等到页面全部被加载完成时再加载CSS样式，所以在页面还未加载完成期间，页面还没有CSS样式效果，会导致“屏闪”，通过@import导入的CSS样式是无法用dom去控制的。

4.链接式

也就是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用语法如下：

<link type="text/css" rel="stylesheet" href="CSS样式文件的地址">

必须有href属性，用于指定需要引入的CSS文件的路径。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

总结

使用CSS样式时，尽量将CSS代码与HTML代码分离，css的引入最好使用链接式，即最好使用引入外部CSS文件的方式。

链接: https://fly63.com/article/detial/631