@import the difference between importing an external style sheet and linking a link to an external style sheet

Yesterday I met a colleague asking a question, @impor what is the priority of importing an external style to link to an external style, and why the result of the experiment is to determine the priority based on the position of the style sheet when it was imported. Today on this issue, degrees Niang looked for a long time, finally have a summary of the answer came out. I feel this credibility is still very high. If you have questions or other ideas, you are welcome to discuss them together. The concrete summary is as follows:

First explain the Web page to add CSS style method, a total of four kinds, namely:first, embedded style--add <div style= "border:1px red solid" directly to the label on the page. > Test Information </div>second, the internal style sheet--in the Head section, add <style type= "Text/css" >div{margin:0;padding:0;border:1px red Solid;} </style> third, the link into the external style sheet- in the head part of the <link rel= "stylesheet" type= "Text/css" href= "my.css" media= "all" /> Introduction of external CSS files Iv. Importing an external style sheet--adding in the head section<style type= "Text/css" >@import url (my.css); </style>

Style sheet priority order from highest to lowest: inline style > Internal style sheet > Import external style sheet (in fact, it belongs to an internal style sheet)

linking to an external style sheetAndInternal style sheetThe priority between the points depends on the order of the position, and the last defined priority is the highest. This article is mainly to do @import import style sheet and link into the style sheet of the difference between the discussion, so the others do not discuss. 1. Link the external style sheet into the external stylesheet is to save the stylesheet as a stylesheet file, and then link to the stylesheet file with the <link> tag in the page, this <link> tag must be placed in the Note: Importing an external style sheet must be at the beginning of the style sheet, above the other internal style sheets. Comprehensive degrees Niang's many articles and personal understanding, the difference between the two summarized as follows: 1: The difference between the ancestors. Link is an XHTML tag, and @import is completely a way to provide CSS. In addition to the link tag can be loaded CSS, but also can do a lot of other things, such as the definition of RSS, the definition of REL connection properties, and so on, @import can only load CSS. 2: Load time and order are different. Using the link links CSS is the client to browse your Web page when the external CSS files loaded into the Web page, and then compile the display, so that the display of the page is the same as we expected, even if a page link multiple CSS files, slow speed is the same effect , and the use of @import imported CSS is different, the client when browsing the Web page is the HTML structure, and then the external CSS files loaded into the Web page, of course, the final effect is the same as the former, but only when the slow speed will appear first show no CSS A layout when the HTML page, this will give the reader a very bad feeling. This is also the most of the Web site CSS is the most important reason to link the way. 3: Compatibility is different. Because @import is CSS2.1 proposed by the old browser does not support, @import only in IE5 above the ability to identify, and link tag does not have this problem. 4: There was a problem using the DOM to control the style. When using JavaScript to control the DOM to change styles, you can only use the link tag, because @import is not controlled by the DOM. 5: Import style avoids too many pages pointing to a CSS file. When the Web site uses the same CSS file page is not very long, the two ways in terms of effect is almost no different, but the number of pages of the site to a certain extent (such as Sina, etc.), if the use of links may be caused by multiple pages call the same CSS file resulting in slow speed, But the General page can reach this level of the site will also have the capital with the best hard drive, so this aspect of the factors do not have to worry about. In summary, the general common site in the call external style sheet, or It is better to choose link link to external style sheet as far as possible。 For the difference between the 2nd loading order in the differences, find a foreign reference article as additional information: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

@import the difference between importing an external style sheet and linking a link to an external style sheet