CSS 中的 @import 规则

cssweb developmentfront end technology更新于 2025/1/8 14:04:17

CSS @import 规则用于通过在导入样式表的 URL 后指定媒体类型来设置特定目标媒体的样式信息。

语法

以下是语法 −

@import url ("/* file path */") mediatypes {
   CSS-Code;
}

我们来看一个 CSS @import 规则的示例:

HTML 文档

示例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>

CSS 文档 (screen.css)

p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}
CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }

输出

当文档在屏幕媒体类型中可见时 −

当文档在打印媒体类型中可见时 −

让我们看另一个 CSS @import 规则的示例 −

HTML 文档

示例

<!DOCTYPE html>
<html>
<head>
<title>CSS @import rule</title>
<style type="text/css">
@import url(all.css) all;
</style>
</head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>
CSS document (all.css):
p {
   float: left;
   margin: 10px;
   padding: 10px;
   color:white;
   background-color: #48C9B0;
   border: 4px solid #145A32;
}
p.noneFloat{
   float: none;
   clear: both;
   color: #34495E;
}