CSS introduced in the way, a total of several, which are the different ways, what is the difference?

2017-10-26

A total of 4 methods, respectively, inline, embedded, external, import.

The first type: inline

This is written directly within the label, Style= "",:

Add a div block with a width height of 300px style. This way the HTML code will be redundant, a small demo or just touch the HTML can be used, but it is not recommended to use this way, it is possible to know this way.

The second type: inline

This is in the head tag, add a style tag, the style of adding styles,:

Give this div block a style with a red background color. This way will make the page too "heavy", is also a small demo or just touch the HTML can be used, and is not recommended to use.

The third type: Outreach

This is a new. css file that introduces styles via link:

In the CSS file, write the style directly, and link the style to the. html file. This way is a common way, a separate CSS folder inside the content of the CSS, each part of the details, or to manage.

Fourth type: Import

This is in the head tag, add a style tag, and then write the @import URL (), with the same way as Link:

As with link implementation, the difference is that link is loading the introduced style while the page is loading, and @import is loading the introduced style after the page is loaded, and link is a label in XHTML, so it's compatible with all browsers, But @import is proposed in the CSS2.1, so the low version of the browser will be incompatible, link can be changed by JS style, @import is not, and there is a link can be introduced in addition to CSS for other files, but @import can only introduce CSS files.

CSS introduced in the way, a total of several, which are the different ways, what is the difference?