温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-20 11:36:06 来源:亿速云 阅读:314 作者:Leah 栏目:web开发

本篇文章为大家展示了如何在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的文件

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel="stylesheet" href="style1.css" /><!--在HTML文件中导入style1.css文件-->
<head>
<body>
<div class="box">
<h2>亿速云</h2>
<p>测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!</p>
</div>
</body>
</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)的情况下

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

style2.css文件:

 body { 
    background:gainsboro; 
        opacity: 0.5; 
} 
h2{
color: #008000;
}

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

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

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

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI