Home > Developer > Web Develop
Link or import ?), Cssimport
Preface
There are three most common CSS usage methods.
1. Use the style attribute to define CSS on labels such as span and div.
<span style="color:blue">This is Blue.</span>
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><style type="text/css">.blue{ color:blue}</style></HEAD><BODY><span class="blue">This is Blue.</span></BODY></HTML>
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><link href="blue.css" rel="stylesheet" type="text/css" /></HEAD><BODY><span class="blue">This is Blue.</span></BODY></HTML>
4. In addition to the preceding method, another method is to use @ import.
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><style type="text/css">@import url(blue.css);</style></HEAD><BODY><span class="blue">This is Blue.</span></BODY></HTML>
1. Source and function. Link is An XHTML label. In addition to loading CSS, it can also define RSS and rel connection attributes;
@ Import is a method provided by CSS. It can only load CSS.
2. The loading sequence is different. The CSS referenced by link is loaded when the page is loaded;
The CSS referenced by @ import will be loaded after all the pages are downloaded, so sometimes there will be no style at the beginning, then the page will flash and show the style (it will be more obvious when the network speed is slow ).
3. Differences in compatibility. @ Import is proposed by CSS2.1. It is not supported by old browsers and can only be identified by IE5 or above (but now, it is no longer a problem, and IE5 or below should be rarely used ).
All links are supported.
4. link can be controlled using javascript, but @ import cannot.
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><link id="linkId" href="" rel="stylesheet" type="text/css" /></HEAD><BODY><span class="blue">This is Blue.</span><script>document.getElementById("linkId").href = "blue.css";</script></BODY></HTML>
The advantage is that it is easy to modify and expand.
CSS splitting into files is convenient and clear for development and maintenance, but there is a drawback that it will generate a large number of HTTP requests to the website server. Exercise caution when using websites with large page views. For websites with large page views, CSS or js is directly written in html.
If you want to load the style sheet in parallel to make the page faster, use LINK instead of @ import.
Essentially, both methods are used to load CSS files, but there are still slight differences.
Difference 1: The old ancestor's difference. Link is An XHTML label, and @ import is a method provided by CSS.
In addition to loading CSS, link labels can also do many other things, such as defining RSS and rel connection attributes. @ import can only load CSS.
Difference 2: the order of loading is different. When a page is loaded (that is, when it is browsed by a browser), the CSS referenced by link is loaded at the same time, the CSS referenced by @ import will be loaded after all the pages are downloaded. So sometimes, when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning, and the speed is quite slow (mengzhidu loads CSS by using @ import, the above problem occurs when I download and browse the dream capital web page ).
Difference 3: Differences in compatibility. Because @ import is proposed by CSS2.1, it is not supported by the old browser. @ import can be identified only when it is later than IE5, but the link label does not have this problem.
Difference 4: differences when using dom to control styles. When using javascript to control the dom to change the style, only link labels can be used, because @ import is not controllable by dom.
Difference 5: @ import can introduce other style sheets in css again. For example, you can create a primary style sheet and then introduce other style sheets in the primary style sheet,
Basically, there are several differences (if there are any differences, let me know and I will add them). The others are the same. From the above analysis, it is better to use the link label.
What is the difference between using link and @ import url when calling css?
Differences between loading css link and @ import:
In fact, the display effect of link and @ import is quite different. Basically, the addition of link is completely added before the display of the page, @ import is added after the file is read, so if the network speed is good or fast, no css definition is started first, and then the css definition is loaded. @ Import the page will flash at the beginning of loading (the page without a style sheet), and then restore to normal (the page after the style is loaded). Link does not have this problem.
They are the same in method, but there is a gap in browser identification. link supports CSS in browsers, while @ import is only available in Versions later than 5.0, it can also be used for browser filtering, that is, using hack, and is compatible with earlier browsers. Therefore, it is better to use the link generic model, but for browsers of higher versions, that is, the current browsers, they are all the same. This is a meaningless distinction.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
