Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what is the difference between import and link in CSS". In daily operation, I believe that many people have doubts about the difference between import and link in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "what is the difference between import and link in CSS?" Next, please follow the editor to study!

The difference between import and link in CSS

See that Taobao page is written using import, and many websites use link, of course, there are some relatively simple pages, high traffic sites, is to write CSS directly in the html code? What's the difference between them? Is css better to use import or link? I got a general idea from the Classic Forum and another website.

I can see that most of the Taobao web pages are written like this.

Sample code

@ importurl ("http://www.divcss8.com/home/css/global/v2.0.css?t=20070518.css")

And many websites use link.

Sample code

On the other hand, websites such as google and Baidu 163are written directly in the web page.

Of course, the advantage of using link link and importing import is that it is easy to maintain, but when the network speed is slow, loading will be interrupted, resulting in page typesetting errors.

They both play the same role.

The only difference is that the clients are different.

@ importserves CSS

Link is a service for current pages

Some netizens in the classic said @ import will be given priority.

The difference between link and @ import in external reference CSS

I have just written several ways for XHTML to load CSS in the past two days, among which the external reference CSS is divided into two ways: link and @ import.

In essence, both methods are designed to load CSS files, but there are still slight differences.

Difference 1: the difference between ancestors. Link belongs to the XHTML tag, and @ import is entirely a way that CSS provides.

The link tag can do many other things besides loading CSS, such as defining RSS, defining rel connection properties, etc. @ import can only load CSS.

Difference 2: difference in loading order. When a page is loaded (that is, when it is viewed by the viewer), the CSS referenced by link will be loaded at the same time, while the CSS referenced by @ import will wait until the page has been downloaded before it is loaded. So sometimes when browsing the page where @ import loads CSS, there will be no style (that is, flashing), and it's obvious when the network is slow (the way Dreamland loads CSS is to use @ import, which occurs when I download and browse the Dream City page).

Difference 3: difference in compatibility. Since @ import is proposed by CSS2.1, the old browsers do not support it. @ import can only be recognized by those above IE5, while the link tag does not have this problem.

Difference 4: differences when using dom to control styles. When you use javascript to control dom to change styles, you can only use the link tag, because @ import is not controlled by dom.

At this point, the study on "what is the difference between import and link in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.