import
CSS @import Rule
The CSS @import at-rule is used to import style rules from other style sheets and to support media queries. The @import keyword must be followed by the URI of the style sheet to include. A string is also allowed. It must be at the top of the document but after the @charset rule.
The @import property cannot be used inside conditional group at-rules.
| 类目 | 类目 |
|---|---|
| Initial Value | - |
| Applies to | - |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.@import = “url”; |
Syntax
Syntax
@import: url | string list-of-mediaqueries | initial | inherit;
Example of the @import rule:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=Lobster');
.p1 {
font-family: 'Coiny', cursive;
}
.p2 {
font-family: 'Lobster', cursive;
}
</style>
</head>
<body>
<h2>@import property example</h2>
<p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
<p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
</body>
</html>
Result
The Difference Between Relative URL and Absolute URL
The Difference Between Relative URL and Absolute URL
A <url> or a <string> data types are accepted by the @import rule for determining the file that should be imported. This can be provided as an absolute or a relative URL.
The code example below uses a relative URL. This means that the URL is relative to the location of the current style sheet. Here we don’t need to provide a path. Instead, we only provide the name of the file.
@import "relative.css";
In the next example the URL is still relative, though we have provided some path information:
@import "../css/relative.css";
As you can see the following code example includes the full path with the domain name. This means that the URL is absolute.
@import "http://www.examples.fr/css/absolute.css";
Media queries
Media queries
Media queries are supported by the @import rule. This means that the import can be media-dependent. In the code example below you can import the style sheet only when the media is print.
@import "mediaquerry.css" print;
Values
Values
| Value | Description |
|---|---|
| url | A <url> or a <string> showing the location of the resource to import. Url can be relative or absolute. |
| string list-of-mediaqueries | A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |