CSS @import规则用于将一个样式表导入另一个样式表。此规则还支持媒体查询,以便用户可以导入与媒体相关的样式表。在任何@charset声明之后,必须在文档的顶部声明@import规则。 原文地址:CSS @import规则有什么用?
语法:
@import url|string list-of-mediaqueries;
属性值:
● url|string:url或string表示要导入的资源的位置;网址可以是相对的或绝对的。
● media-of-mediaqueries:媒体查询列表决定了链接URL中定义的CSS规则的应用。
示例:下面有两个CSS
style1.css
/*导入另一个CSS文件 */
@import url("style2.css");/* 或者@import url(style2.css);*/
h1 {
text-align: center;
}
style2.css
h1 {
color:red;
font-size:60px;
}
p {
padding: 10px;
background-image: linear-gradient(to right, #fbd6d3, #ff1200);
}
将第一个CSS文件style1.css链接到HTML文档中,并查看输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style1.css" rel="stylesheet">
</head>
<body>
Hello World!
<p>这是一段测试文本!测试文本!测试文本!测试文本!</p>
</body>
</html>
效果图:
浏览器支持
@import规则支持的浏览器如下所示:
● Google Chrome
● Internet Explorer 5.5
● Firefox
● Safari
● Opera 更多编程知识可以关注php中文网。
推荐阅读: