Web front-end interview guide (11): what are the ways to import styles?

Style import mode

Link

Import

Mode of use

The use of link

[css] view plain copy

The use of import

[css] view plain copy

@ import "index.css"

Differences

In addition to referencing style files, link can also reference resource files such as pictures, while import only references style files

Compatibility is different, and there is no compatibility problem in link. Import is supported above IE5, which is added by css2.1.

Other stylesheet files can be imported using import in stylesheet files, while link cannot

When link references CSS, it loads at the same time as the page loads; @ import requires the page page to be loaded after it is fully loaded.

Link supports using Javascript to control DOM to change styles; @ import does not.

Add item

There are many ways to write import.

@ import 'style.css' / / Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 does not recognize

@ import "style.css" / / Windows IE4/NS4, Macintosh IE4/NS4 does not recognize

@ import url (style.css) / / Windows NS4, Macintosh NS4 does not recognize

@ import url ('style.css') / / Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 does not recognize

@ import url ("style.css") / / Windows NS4, Macintosh NS4 does not recognize

@ import url (index.css) is recommended

-