CSS @import规则有什么用？

CSS @import规则用于将一个样式表导入另一个样式表。此规则还支持媒体查询，以便用户可以导入与媒体相关的样式表。在任何@charset声明之后，必须在文档的顶部声明@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> 
    <h1>Hello World！</h1> 
    <p>这是一段测试文本！测试文本！测试文本！测试文本！</p> 
</body> 
</html>

效果图：

7aebf63307e779f1877ce31521d4578.png-600