What is the difference between import and link in CSS

The content of this article is about the difference between import and link in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The difference between import and link in CSS

When I saw this written on the Taobao page, it uses import, while many websites use import. Do you use links? Of course, there are some websites with relatively simple pages and high traffic. Do you write CSS directly in the html code? What's the difference between them? Is it better to use import or link for css? I got a rough idea from the classic forum and another website

I saw that most of the Taobao web pages are written like this

Sample code

<style type="text/css" media="screen">
@import url（"http://www.divcss8.com/home/css/global/v2.0.css?t=20070518.css"）；
</style>

And many websites use this link

Sample code

<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />

And websites such as Google, Baidu 163, etc. are written directly in the webpage

Of course, the advantage of using links and imports is that they are easy to maintain. But when the network speed is relatively slow, there will be loading interruptions, resulting in page layout errors

They have the same effect

The only difference is that the service objects are different

@import serves CSS

link serves the current page

Classic Some netizens said that @import will be executed first.

The difference between link and @import in external reference CSS

In the past two days, I just finished writing several ways to load CSS in XHTML. Among them, external reference CSS is divided into two methods: link and @import.

Essentially, these two methods are used to load CSS files, but there are still subtle differences.

Difference 1: The difference between ancestors. Link belongs to the XHTML tag, and @import is completely a method provided by CSS.

In addition to loading CSS, the link tag can also do many other things, such as defining RSS, defining rel connection attributes, etc. @import can only load CSS.

Difference 2: The difference in loading order. When a page is loaded (that is, when viewed by a viewer), the CSS referenced by link will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. So sometimes when browsing the page where @import loads CSS, there will be no style (it just flickers), which is quite obvious when the network speed is slow (the way to load CSS in Dream City is to use @import, I download and browse the Dream City web page at the same time) , the above problems will occur).

Difference 3: Difference in compatibility. Since @import was introduced in CSS2.1, older browsers do not support it. @import can only be recognized by IE5 or above, but the link tag does not have this problem.

Difference 4: The difference when using dom to control the style. When using JavaScript to control the dom to change the style, you can only use the link tag, because @import is not controllable by the dom.

Roughly these are the differences (if there are any other differences, please tell me and I will add them). Everything else is the same. From the above analysis, it is better to use the link tag.

The above is a complete introduction to the difference between import and link in CSS. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What is the difference between import and link in CSS. For more information, please follow other related articles on the PHP Chinese website!