在 CSS 中导入外部样式表

cssweb developmentfront end technology更新于 2025/1/7 1:48:17

我们可以在另一个 CSS 声明中导入其他 CSS 文件。@import 规则用于此目的，因为它会链接文档中的样式表。这通常用于一个样式表依赖于另一个样式表的情况。它在文档顶部的 <head> 内的 @charset 声明之后指定。

语法

@import 规则的语法如下

@import /*url 或 list-of-media-queries*/

媒体查询可以是复合语句，用于指定文档在不同媒体中的行为。

示例

以下示例实现了 @import 规则 −

HTML 文档 −

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
   background-color: honeydew;
}
</style>
</head>
<body>
<p>This is demo paragraph one. </p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html>

CSS 文档:style.css

p { color: navy; font-style: italic; }
.two { color: darkgreen; font-size: 24px; }

输出

这将产生以下输出 −

示例

HTML 文档 −

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>

CSS document−

div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid blueviolet;
   box-shadow: 22px 12px 3px 3px lightblue;
   position: absolute;
   left: 30%;
   top: 20px;
}