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

原创已于 2023-12-07 16:16:33 修改 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-12-07 16:13:23 首次发布

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS的三种引入方式：内联样式、内部样式表和外部样式表，强调了外部样式表的可维护性和可重用性，并讨论了标签和@import指令的区别，如加载顺序、兼容性和DOM操作限制。

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

例如：

<p style="color: red; font-size: 16px;">这是一段红色的文本</p>

内联样式适用于对单个元素应用特定的样式，但不适合用于整个网页或多个元素的样式定义。

2.内部样式表（Internal Style Sheets）：可以在HTML文档的标签中使用

例如：

<head>
 <style>
 p {
 color: red;
 font-size: 16px;
 }
 </style>
</head>
<body>
 <p>这是一段红色的文本</p>
</body>

内部样式表适用于在单个HTML文档中定义样式，可以应用于多个元素。

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

通过标签引入（最常用方式）

例如：

<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <p>这是一段红色的文本</p>
</body>

在这种方式下，CSS样式定义保存在名为styles.css的外部文件中，可以被多个HTML文档共享。这样做可以提高代码的可维护性和可重用性。

通过@import指令引入

@import指令是CSS语言的一部分，使用时把这个指令添加到HTML的一个

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

<html>
<head>
<style type="text/css">    
    @import url(css/styles.css);
</style>
<!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加-->
</head>

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

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

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

两种方式的区别

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

参考链接

https://zhuanlan.zhihu.com/p/658723834
https://www.cnblogs.com/zhaoyingli/p/5379990.html