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.