CSS @import 规则

最后更新于：2022-03-26 21:31:30

CSS import 规则

实例

导入 “navigation.css” 样式到当前的样式表：

@import "navigation.css"; /* 使用字符串 */

或者

@import url("navigation.css"); /* 使用 url 地址 */

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
@import 1.0 5.5 1.0 1.0 3.5

属性定义及使用说明

CSS @import 用于从其他样式表导入样式规则。

@import 规则必须在 CSS 文档的头部，但可以在 @charset 规则后面。

@import 规则不是一个嵌套语句，@import不能在条件组的规则中使用。

@import 规则还支持媒体查询，因此你可以根据不同屏幕尺寸导入不同的样式文件。

CSS 语法

@import url|string list-of-mediaqueries;

属性值

值 描述
url|string 表示要引入资源地址。这个 URL 可以是绝对路径或者相对路径。 要注意的是这个 URL 不需要指明一个文件； 可以只指明包名，然后合适的文件会被自动选择 (例如 chrome://communicator/skin/)。
list-of-mediaqueries 是一个逗号分隔的媒体查询条件列表，设置 URL 引入的 CSS 规则在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入 URL 指定的 CSS 文件。

实例

更多样式导入实例：

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import ‘custom.css‘;
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url(‘landscape.css‘) screen and (orientation:landscape);