The difference between link and @import methods of referencing css files

The user can freely choose to change the style referenced by the element, and the imported style sheet will be automatically integrated with the remaining style sheets.

4 ways to combine CSS with HTML documents:
1 Use the element to link to an external style file
2 Use the "style" element in the

element to specify it
3 Use the CSS "@import" tag to import the style sheet
4 Inside the Use the "style" attribute in the element to define the style

An example:

The first is to write css directly on the html page, while the second and third are to use external Reference styles extract files individually.

Question 1. What is the difference between link and @import?
Let’s take a look at their definitions first

link element
Both HTML and XHTML have a structure that allows web page authors to add additional information related to HTML documents. These additional resources can be styled information (CSS), navigation aids, information in other forms (RSS), contact information, etc.

@import
Specify the imported external style sheet and target device type.
In fact, the most fundamental difference between link and @import is that link is a tag in html, and @import is a tag in css.
In addition to calling css, link can also have other functions, such as declaring page link attributes, declaring directories, and rss Wait, and @import can only call css. If you reference css from the outside alone, their functions are basically the same, except that the boss above is different. :)

Question 2. Which one is better, link or import?

As mentioned above, because the bosses above are different, there will be some detailed differences in use. I cannot say who is better and who is worse in general.
I can only analyze the specific situation.
1) I want to use javascript for style selection;
This time I need to use link, because link is an html element, and javascript can be used to control the dom element to finally achieve the effect of changing the style.
Look at the following code

This is a very classic piece of code to change the page style, because today we are mainly talking about link and import, so I only list the reference css part here.

Let’s first take a look at what each attribute in link means:
[1]rel: used to declare the role or type of the link object.
For example, in the above code: "stylesheet" means linking to a default css, while "alternate stylesheet" means linking to an alternative css.
[2]href: I don't need to say this, it refers to the file path of the css.
[3]style: file type
[4]media: application device, "screen" means the application is on the screen.
[5]title: is the name of css.
There are a total of 5 css in this code. The first one is the basic style, and the other four are style styles. Use javascript to control the default displayed style title.

2) I want to apply the printing style;

The printing style, as the name suggests, is the style when printing the page.
This style has no effect under normal browsing and only takes effect when printing.
If you want to reference the printing style separately for the page, both link and @import can be used.

link code

@import code

There is also another way for css @media:

@media print {

@import "print.css"
}
Use @media First set the device to print, and then use @impor to link

3) I want to reference multiple styles;

If you want to reference multiple style combinations on one page to produce effects, both link and @import are also acceptable.

link code

T @Import code

& lt; style type = "text/css" & gt; @import url (../ css/base/my.Layout.css); .Typo.css);

& lt;/style & gt;

... is more clearer when referenceing multiple files with @import.
First use link to reference a css file

and then reference it in this css file.

@import url(../css/base/my.typo.css :); CSS style is a waste of code and energy, so it is better to do this. All pages reference one css, and then one css references multiple css, which is convenient for management and maintenance.

The difference between link and @import when loading css: In fact, there is a big difference in the display effect between link and @import. Basically, the link will be added completely before the page is displayed, while @import will be read. After fetching the file, add it, so if the network speed is very good or very fast, there will be no css definition first, and then the css definition will be loaded. When @import loads a page, it will flicker for the first moment (page without style sheet), and then return to normal (page after loading styles). Link does not have this problem.

They are the same in terms of methods, but there is a slight difference in browser recognition. Link is supported on browsers that support CSS, while @import is only valid in the 5.0 one-line version, and it can also be used for browser filtering. The use of hack is compatible with some older versions of browsers. Therefore, it is better to use the link universal type, which is stronger, but for higher version browsers, that is, current browsers, they are actually the same. This is a distinction that does not make much sense.

The best way to write @import: There are generally the following ways to write @import:
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 does not recognize
@import " style.css" //Windows IE4/ NS4, Macintosh IE4/NS4 does not recognize
@import url(style.css) //Windows NS4, Macintosh NS4 does not recognize
@import url('style.css') //Windows NS4 , Mac OS Import url("style.css") is the best choice and is compatible with the most browsers. From the perspective of byte optimization, @import url(style.css) is worthy of being the most recommended writing method.

CSS code format can reduce the size of style sheet files

When writing CSS style sheets, in order to make it easier to read the style definition code later, we will write each code on one line. But I found that writing this way seems not good, because CSS code is not as logical as program code after all. It is mainly written in the corresponding way of name and value. So writing on the same line will not particularly affect reading. On the contrary, it will reduce the size of the style sheet file because many newline characters and spacers are reduced. I tested it and found that the file size can be reduced by about 12%. If the style sheet file is relatively large or there are many files, the download volume of the client will be significantly reduced and the opening speed of the web page will be improved.
Please note that there is no space between the colon of the style name and the following value. Just separate the two styles with a space.
The specific format is as follows:
Program code:
div {margin:20px; padding:10px; background-color:#F00;}