There are several ways to introduce css

There are four ways to introduce css: 1. Use "" to introduce css styles; 2. Use "@import "css file address"" to introduce css styles; 3. Write the css style in the style tag; 4. Use the style attribute to write the css style in the element tag.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

(1) Link type: Use the tag in the

tag pair of the web page to introduce external style sheet files, and use html rules to introduce external css (use more More) :

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

(2) Import type: Introduce an independent .css file into the HTML file. The import type uses CSS rules to introduce external CSS files. The

<style type="text/css">
   @import"mystyle.css"; 此处要注意.css文件的路径
</style>

Comparison: The difference between link reference and import reference is: link is referenced before html is loaded, while import is referenced after html is loaded. For example, using import reference, the page without styles will be displayed first, and then the styles will be put in. If you use JavaScript to dynamically reference CSS, you must use the link reference method to achieve this.

(3) Inline css files, write css directly in the header, such as:

<style type="text/css">
    p{
        margin: 0;
        padding: 0;
        border:1px red solid;
    }
</style>

The usage of this method is much less, the longest is the number of visits Big portal. Or the home page of a corporate website with a large number of visits. Compared with the first method, the advantages are outstanding and the disadvantages are also obvious.

Advantages: Fast, all CSS controls are for this page tag, there are no redundant CSS commands; and there is no need to link external CSS files. Read styles directly in HTML documents.

The disadvantage is that revision is more troublesome, a single page looks bloated, CSS cannot be referenced by other HTML, resulting in a relatively large amount of code, and maintenance is also troublesome. However, most companies that adopt this method have money. For them, the number of users is the key, and they have no shortage of people to perform complex maintenance work.

(4) Write the style

<p style="border:1px red solid;">测试信息</p>

directly in the tag for places that are not frequently changed. It can be used once, but it should be used with caution, it is not suitable for the public.

Recommended learning: css video tutorial

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