CSS 引入的方式有哪些? link 和@import 的区别是?

December 16, 2019

1504 views

911 words

CSS 引入的方式有哪些? link 和@import 的区别是?
----------------------------------------------

**一.引入CSS的方式**

在HTML中引入CSS的方式主要有四种：行内式，内嵌式，链接式，导入式

**1.行内式**

```css
<div style="background:yellow;"></div>
```

**2.内嵌式**

每个单一网页可以考虑使用内嵌式

```css
<html>
    <head>
        <style>
             ..// 此处添加css代码
        </style>       
    </head>
</html>
```

**3.链接式**

将css放在一个后缀为.css的文档中，然后在页面的header标签中用link标签引入

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为stylesheet，表示被链接的文档式一个样式表文件

href：定义所连接外部样式表文件的URL，可以式相对路径也可以是绝对路径

```css
<link rel="stylesheet" href="css的路径" type="text/css" >
```

**4.导入式**

在HTML的header标签的style标签中引入，也可以在css文件中用@import方式引入

```css
<style>  
    @import "test.css";  
</style>
```

**二.link和@import引入方式的区别**

1.link是XML标签，除了加载css外，还可以定义RSS等其他事务，@import属于CSS范畴，只能加载CSS

2.link引入css时，和页面载入同时加载，@import需要网页完全载入之后加载(因此@import引入会导致网页如果比较大会先显示没样式的网页，闪烁一下后再出现样式)

3.link是XML标签，无兼容性问题，@import是CSS2.1提供的，低版本的浏览器不支持

4.link支持使用javascript控制DOM去改变样式，而@import不支持

</div>

Last modification：September 4, 2023

如果觉得我的文章对你有用，请随意赞赏