CSS importRules
Example
Import the "navigation.css" styles into the current stylesheet:
@import "navigation.css"; /*Use a string*/or@import url("navigation.css"); /*Use url address*/
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| @import | 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
Attribute definition and usage instructions
CSS @import is used to import style rules from other stylesheets.
The @import rule must be at the top of the CSS document, but it can be@charsetafter the rule.
The @import rule is not a nested statement; @import cannot be used within conditional group rules.
The @import rule also supports media queries, so you can import different style sheets based on different screen sizes.
CSS Syntax
@import url|string list-of-mediaqueries;
Property value
| Value | Description |
|---|---|
| url|string | Indicates the address of the resource to be imported. This URL can be an absolute path or a relative path. Note that this URL does not need to specify a file; it can specify just a package name, and the appropriate file will be automatically selected (for example, chrome://communicator/skin/). |
| list-of-mediaqueries | Is a comma-separated list of media query conditions that sets under what conditions the CSS rules introduced by the URL apply. If the browser does not support any of the media query conditions in the list, the CSS file specified by the URL will not be imported. |
Example
More style import examples:
@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);