Several ways and differences of CSS introduced in HTML page

1. Use the Style property of the HTML tag

such as: <p style= "FONT-SIZE:12PX; Color:blue ">

The advantages of this approach: decentralized and flexible and convenient;

Shortcomings: lack of integrity and planning, not conducive to maintenance, high maintenance costs;

CSS rendering in this way has a higher priority than the other three types.

2. Write the style code in the <style></style> tab

Always place style tags in html files

such as:

Advantages of this approach: CSS code within a single page is unified and programmatic, and is easy to maintain.

Cons: CSS reuse between multiple pages is still not enough.

3. Use the <link> tag to introduce an external CSS file

<link rel= ' stylesheet ' type= ' text/css ' href = '/css/base.css ' >

External CSS file: base.css:

p {color: #000}

...

The advantages of this approach: a page can introduce multiple external CSS files, easy to reuse CSS code, easy to maintain;

The current application is long.

Cons: Centralized code, easy to confuse.

4. Using @import to introduce CSS files

This method can be used in both <style> tags and in external CSS files, such as:

@import url ('/css/list.css ')

Features: easy to introduce, but may be poor performance

Use link tags and @import differences:

1. Different categories: Link is an HTML tag, in addition to loading CSS, you can also define other such as RSS transactions, @import belong to the CSS category, can only load CSS;

2. Loading order is different: When link is introduced into CSS, it is loaded at the same time when the page is loaded, and @import needs the page to load completely.

3. Compatibility difference: Link is XHTML label, so there is no compatibility problem, and @import is CSS2.1 (IE5 above to recognize), so the low version of the browser is incompatible;

4. Support JS DOM change: Link supports using JavaScript to control DOM changes CSS style, @import not supported;

5. Different weights: Link style weights are higher than the weights of the @import style.

Several ways and differences of CSS introduced in HTML page