在CSS中导入外部样式表

ID:13112 / 打印

我们可以在另一个css声明中导入额外的css文件。@import规则用于此目的，它在文档中链接样式表。通常在一个样式表依赖于另一个样式表时使用。它在

标签内的@charset声明之后的文档顶部指定。

Syntax

@import规则的语法如下：

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

The media queries can be compound statements which may specify the behavior of the document in different media.

Example

The following examples implement the @import rule −

HTML document −

立即学习“前端免费学习笔记（深入）”；

<!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; }

输出

这将产生以下输出 −

在CSS中导入外部样式表

示例

HTML文档 −

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

CSS文档−

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; }