在CSS中导入外部样式表

百变鹏仔 3个月前 (09-20) #CSS

文章标签样式表

我们可以在另一个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; }

输出

这将产生以下输出 −

示例

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

输出

这将产生以下输出 −

文章推荐

在CSS中导入外部样式表

Syntax

Example

输出

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写