在HTML中导入外部的css

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1,标签：<link type="text/css" rel="stylesheet" href="CSS样式文件的绝对地址">

它只能位于HTML文档的head标签内，且必须有href属性，用于指定需要引入的CSS文件的绝对路径。

2.1:在style元素中导入CSS文件

<style type="text/css">
    @import "CSS样式文件的绝对地址";
    @import url("样式文件的绝对地址");
</style> (url可省略，所以只需指定样式单地址即可)

2.2在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去控制的。