在HTML中，引入CSS的主要方式是内联，内联，导入和链接。
内联：即在标记的 style 属性中设置 CSS 样式，这种方法本身并没有突出 CSS 的优点，所以不建议使用。
例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Text Demo</title> </head> <body> <h1 style=color:white;background-color=blue;> This is a line of Text. </h1> </body> </html>
嵌入：嵌入将设置放置在页面中的各种元素上，方便单个网页。但是对于一个有很多页面的网站，如果每个页面都以
内联方法设置自己的样式失去了CSS的巨大优势，所以一个网站一般会编译一个单独的CSS样式表文件，使用以下两种方法之一，到HTML文档中。
例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Text Demo</title> <style type="text/css"> h1{ color:white; background-color:blue; } </style> </head> <body> <h1>This is a line of Text.</h1> <h1>This is another line of Text.</h1> </body> </html>
导入和链接
：导入和链接的目的是将单独的CSS文件带入HTML文件中，两者之间有相应的区别。
实际上，两者最大的区别在于链接类型使用HTML标记来引入外部CSS文件，而导入类型使用CSS规则来引入外部CSS文件。因此，它们的句型也不同。
如果使用linked，则需要使用以下句子来介绍外部CSS文件。
<link href="mystyle.css" rel="stylesheet" type="text/css" />
如果您使用
导入类型，需要使用以下句子。
<style type="text/css"> @import"mystyle.css"; </style>
此外，两种方法之间的疗效略有不同。使用链接表单时，在安装页面的主要部分之前加载CSS文件css文件引入，以便从一开始就设置显示页面的样式，并使用导出
为
有些浏览器，如果网页文件比较大css文件引入，会先出现没有规范的页面，刷一页再出现样式设置
功效后。根据查看者的经验，这是使用导入类型的缺点。对于较大的网站，为了便于维护，如果您使用链，您可能希望将所有 CSS 变体放入多个 CSS 文件中
在介绍的情况下，有必要将CSS文件与几个句子分开导出。如果要调整CSS文件的分类，则还需要调整HTML文件。这是维护工作的缺点。如果使用导入类型，则只能引入一个
导出其他独立 CSS 文件的总 CSS 文件;链接类型不具有此特征。
因此，如果需要引入CSS文件，建议使用链接表单;如果需要导入多个 CSS 文件，请先以链接的形式导入一个“目录”CSS 文件，然后在此“目录”CSS 文件中使用导入摄取
其他 CSS 文件。
如果您希望 JavaScript 动态决定要导入的 CSS 文件，则必须使用链接表单来实现。
向您展示如何将另一个CSS文件引入CSS文件，代码简洁易懂，一定会让您眼前一亮，希望您通过本文的详细介绍有所收获。
@import规则
首先，让我们看一下@import规则。
@import规则用于将一个变体导出到另一个变体。此规则还支持媒体查询，允许用户导出与媒体相关的变体。在任何@charset声明之后引入css文件，必须在文件底部说明@import规则。
@import的特点：
● @import规则用于将样式表导出到 HTML 页面或其他样式表。
@import规则还用于添加媒体查询，因此导入取决于媒体。
● @import规则始终在文档底部说明。
基本句子结构：
@import url | string list-of-mediaqueries;
url|string：表示要导出的资源的位置引入css文件，可以是相对的，也可以是绝对的。
媒体查询列表：确定 URL 链接中定义的 CSS 规则的应用。
代码示例
下面我们将带您通过一个例子来了解如何将另一个 CSS 文件引入 CSS 文件。
HTML 部分：使用文件名索引创建一个文件.html
亿速云
测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
CSS部分：
样式1.css文件：
/*导入另一个CSS文件 */
@import "style2.css"; /* 或者@import url(style2.css);*/
.box{
width: 400px;
margin: 100px auto;
}
h2 {
color:red;
text-align: center;
}
p {
color:black;
padding: 10px;
background-image: linear-gradient(to right, #fbd6d3, #ff1200);
position:static;
}
输出：导出另一个 CSS 文件 （style2.css） 而不使用@import规则
样式2.css文件：
body {
background:gainsboro;
opacity: 0.5;
}
h2{
color: #008000;
}
输出：使用@import规则通过样式 1 .css文件中的规则导出样式 2 .css文件
注意：有两种方法可以使用@import规则导出另一个 CSS 变体表：@importurl（样式 2.css）; 和@import“style2.css”;
注意：使用 @import 规则导出其他 CSS 变体表时，您需要注意变体表的路径。
以上就是如何将另一个CSS文件引入CSS文件，你学过知识还是技能吗？如果您想学习更多技能或丰富您的知识，欢迎关注艺速云行业信息频道。
