如何在CSS文件中引入另一个CSS文件
本篇文章为大家展示了如何在CSS文件中引入另一个CSS文件,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联于2013年成立,先为曲阳等服务建站,曲阳等地企业,进行企业商务咨询服务。为曲阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
@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文件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
名称栏目:如何在CSS文件中引入另一个CSS文件
链接URL:http://scyanting.com/article/gssesd.html