" to introduce css styles; 2. Use "@import "css file address"" to introduce css styles; 3. Write css in the style tag Style; 4. Use the style attribute in the element tag to write the css style."/> " to introduce css styles; 2. Use "@import "css file address"" to introduce css styles; 3. Write css in the style tag Style; 4. Use the style attribute in the element tag to write the css style.">

Home  >  Article  >  Web Front-end  >  There are several ways to introduce css

There are several ways to introduce css

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-23 11:35:3214597browse

There are four ways to introduce css: 1. Use "66c170e8cb87b590ee3f1f494dc03bf7" 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.

There are several ways to introduce css

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

(1) Link type: Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag in the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 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 c9ccee2e6ea535a969eb3f532ad9fe89 tag is also written in 93f0f5c25f18dab9d176bd4f6de5d30e In the tag, the syntax used is as follows:

<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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn