css的引入方式有哪些，import 和 link的区别？

2018-06-14 本文已影响0人咸菜大大

有四种方式可以在HTML中引入CSS，如下：

1. 内联引入

特点：优先级高；冗余代码多；代码量大；

<div style="background: red; color: #fff;"></div>

2. 内部书写（嵌入方式）

特点：单一页面速度快，减少服务器请求压力；不易于改版和维护；代码较乱；

<head>
    <style>
    .content {
        background: red;
        color: #fff;
    }
    </style>
</head>

3. 外部引入-链接方式（link）

特点：一个css文件可控制多个页面；易改版易维护；减少代码量，代码简介规范易于分工协作；有效利用缓存机制；外部引入的href属性，会给服务器请求造成压力。

<link rel="stylesheet" type="text/css" href="style.css">

4. 外部引入-导入方式（import）

<style>
    @import url(style.css);
</style>

5. import 和 link的区别

1） import属于css范畴，只能加载css； link是XHTML的标签，除了加载css外，还可以做其他的RSS的事务。
2）import需页面完全载入后再加载； link在页面载入的时候同时加载；
3）import是css2.1引入的，低版本浏览器不支持； link为XHTML标签，无兼容问题。
4）import不支持JavaScript去改变样式； link支持。