CSS文件中如何引入另一个CSS文件？（代码示例）

互联网 19-2-12

我们可以使用@import规则来实现CSS文件中如何引入另一个CSS文件，@import规则可以在主HTML文件或主CSS文件中导入多个CSS文件，本篇文章就来给大家具体介绍一下，希望对大家有所帮助。

@import规则

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

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

@import的特点：

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

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

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

基本句式：

@import url | string list-of-mediaqueries;

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

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

代码示例

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

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

<!DOCTYPE html> <html> <meta charset="UTF-8"> <link rel="stylesheet" href="style1.css" /><!--在HTML文件中导入style1.css文件--> <head> <body> <div class="box"> <h1>PHP中文网</h1> <p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p> </div> </body> </html>

CSS部分：

style1.css文件：

/*导入另一个CSS文件 */ @import "style2.css"; /* 或者@import url(style2.css);*/  .box{ width: 400px; margin: 100px auto; } h1 {       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;  }  h1{ color: #008000; }

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

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

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

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

以上就是CSS文件中如何引入另一个CSS文件？（代码示例）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： @import

CSS文件中如何引入另一个CSS文件？（代码示例）

相关资讯

标签推荐