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

　　@import规则

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

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

　　@import的特点：

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

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

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

　　基本句式：

　　@importurl|stringlist-of-mediaqueries;

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

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

　　代码示例

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

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

　　<!DOCTYPEhtml>

　　<html>

　　<metacharset="UTF-8">

<linkrel="stylesheet"href="style1.css"/>

　　<head>

　　<body>

　　<divclass="box">

　　<h1>PHP中文网</h1>

　　</div>

　　</body>

　　</html>

　　CSS部分：

　　style1.css文件：

　　/*导入另一个CSS文件*/

　　@import"style2.css";/*或者@importurl(style2.css);*/

　　.box{

　　width:400px;

　　margin:100pxauto;

　　}

　　h1{

　　color:red;

　　text-align:center;

　　}

　　color:black;

　　padding:10px;

　　background-image:linear-gradient(toright,#fbd6d3,#ff1200);

　　position:static;

　　}

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c54244.shtml