html引入另一个css,如何在CSS文件中引入另一个CSS文件

如何在CSS文件中引入另一个CSS文件

发布时间：2020-07-20 11:36:06

来源：亿速云

阅读：92

作者：Leah

本篇文章为大家展示了如何在CSS文件中引入另一个CSS文件，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

@import规则

首先我们来了解一下@import规则。

@import规则用于将一个样式表导入到另一个样式表中。此规则还支持媒体查询，以便用户可以导入与媒体相关的样式表。在任何@charset声明之后，必须在文档的顶部声明@import规则。

@import的特点：

●   @import规则用于将样式表导入HTML页面或其他样式表。

●   @import规则也用于添加媒体查询，因此import是依赖于媒体的。

●   @import规则总是在文档的顶部声明。

基本句式：@import url | string list-of-mediaqueries;

url | string：表示要导入的资源的位置，可以是相对的或绝对的。

list-of-mediaqueries：决定了URL链接中定义的CSS规则的应用。

代码示例

下面我们就通过示例来带大家了解一下CSS文件中引入另一个CSS文件的方法。

HTML部分：创建文件名为index.html的文件

亿速云

测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！

CSS部分：

style1.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;

}

输出：在不使用@import规则导入另一个CSS文件(style2.css)的情况下

style2.css文件：body {

background:gainsboro;

opacity: 0.5;

}

h2{

color: #008000;

}

输出：在style1.css文件中使用@import规则导入 style2.css文件

说明：使用@import规则导入另一个CSS样式表有两种方法：@import url(style2.css);和@import "style2.css";

注：使用@import规则导入另一个CSS样式表时，需要注意样式表的路径。

上述内容就是如何在CSS文件中引入另一个CSS文件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。