It is also an external style. What is the difference between @import and link?

There are many ways to introduce CSS styles in HTML, such as inline styles, import styles, link styles, etc. Today, this article will talk to you about the same external styles. Link link style and import import style are What's the difference. Friends in need can refer to it, I hope it will be helpful to you.

Two ways to reference CSS externally:

link method:

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

@import method:

<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

Both are ways of externally referencing CSS, but there are certain differences:

Difference 1: link is an XHTML tag. In addition to loading CSS, it can also define other transactions such as RSS; @import belongs to the category of CSS , only CSS can be loaded.

Difference 2: When link refers to CSS, it is loaded at the same time when the page is loaded; @import requires the page to be fully loaded before loading.

Difference 3: link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers.

Difference 4: ink supports using Javascript to control the DOM to change the style; while @import does not support it.

Supplement: The best way to write @import

Generally, there are the following ways to write @import:

@import 'style.css' //Windows IE4/ NS4, Mac Not recognized by OS , 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
From the above analysis, we know that @import url(style.css) and @import url("style.css") are the best choices and are compatible with the most browsers. From a byte optimization perspective, @import url(style.css) is the most recommended.

The above is the detailed content of It is also an external style. What is the difference between @import and link?. For more information, please follow other related articles on the PHP Chinese website!