What are the four ways to introduce css?

The four ways to introduce CSS are: inline styles, inline styles, link styles and imported styles.

1. Inline style

The most direct and simplest one is to use directly on HTML tags, for example:

<p style="color:#F00; "></p>

Disadvantages: HTML pages are not pure. The file size is large, which is not conducive to spider crawling, and later maintenance is inconvenient.

(Video tutorial recommendation: css video tutorial)

2. Inline style

Inline style is to write CSS code in a34e46bf00bd40a62b8f40d2d232d4e8, and declare it with c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927, for example:

<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>

Advantages and disadvantages: The page uses public CSS code, which must be defined on every page. If a website has many pages, each file will become larger and later maintenance will be difficult. If there are few files and not many CSS codes, this style is still very good.

3. Link style

The link style is the most frequently used and the most practical style. You only need to add 46cc545b244b022846a9a1749d2a84169c3bca370b5104690d9ef395f2c5f8d1 ; That’s it, as follows:

<link type="text/css" rel="stylesheet" href="style.css" />

Advantages and Disadvantages: It realizes the complete separation of page frame code and performance CSS code, making pre-production and post-maintenance very convenient

4. Import styles ( Not recommended)

Import style is similar to link style. Use @import style to import CSS style sheet. During HTML initialization, it will be imported into HTML or CSS file and become part of the file, similar to the second an inline style.

@import is used in html, as follows:

<style type="text/css">
@import url(style.css);
</style>

@import is used in CSS, as follows:

@import url(style.css);

Recommended tutorial: css quick start

The above is the detailed content of What are the four ways to introduce css?. For more information, please follow other related articles on the PHP Chinese website!