css的4种引入方式--内联样式（标签内style）、内部样式表（<style>）、外部样式表（<link>、@import）

dafenqi

2023 年 12 月 07 日

107 次浏览

暂无评论

760字数

css 前端

## 1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中定义CSS样式。

例如：

```html
<p style="color: red; font-size: 16px;">这是一段红色的文本</p>
``` 
内联样式适用于对单个元素应用特定的样式，但不适合用于整个网页或多个元素的样式定义。

## 2.内部样式表（Internal Style Sheets）：可以在HTML文档的<head>标签中使用`<style>`标签定义CSS样式。

例如：

```html
<head>
 <style>
 p {
 color: red;
 font-size: 16px;
 }
 </style>
</head>
<body>
 <p>这是一段红色的文本</p>
</body>
``` 
内部样式表适用于在单个HTML文档中定义样式，可以应用于多个元素。

## 3.外部样式表（External Style Sheets）：可以将CSS样式定义保存在一个独立的CSS文件中，并在HTML文档中通过`<link>`标签（链接式）或者@import指令（导入式）引入。

### 通过`<link>`标签引入（最常用方式）
例如：

```html
<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <p>这是一段红色的文本</p>
</body>
```
在这种方式下，CSS样式定义保存在名为styles.css的外部文件中，可以被多个HTML文档共享。这样做可以提高代码的可维护性和可重用性。

### 通过@import指令引入

@import指令是CSS语言的一部分，使用时把这个指令添加到HTML的一个`<style>`标签中；

要与外部的CSS文件关联起来，得使用url而不是href，并且要把路径放在一个圆括号里面；

```html
<html>
<head>
<style type="text/css">    
    @import url(css/styles.css);
</style>

</head>

<body>
......
</body>
</html
```

通过外部样式表，你可以在同一个CSS文件中定义多个样式规则，并将其应用于不同的HTML元素。

以上是CSS的主要引入方式，开发人员可以根据具体需求选择适合的方式。通常情况下，推荐使用外部样式表，因为它提供了最好的可维护性和灵活性。

### 两种方式的区别
- <link>标签属于html标签，而@import是css提供的一种方式，<link>标签不仅可以引入css，还可以做其他事，而@import只能引入css；
- 加载顺序的区别：当一个页面被浏览时，link引入的css会被同步加载，而@import引用的css是等到其他元素全被下载完之后才被加载；
- 兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的浏览器不支持，而<link>标签无此问题；
- 当使用javascript控制DOM去改变样式时，只能使用<link>标签，因为@import不是DOM可以控制的。

## 参考链接
https://zhuanlan.zhihu.com/p/658723834
https://www.cnblogs.com/zhaoyingli/p/5379990.html

最后修改：2023 年 12 月 07 日