What are the four introduction methods of style sheet css?

Four ways to introduce: 1. Directly use the style attribute in the html tag to introduce it; 2. Write the css style rules in the style tag; 3. Use the link tag to introduce external css files; 4. In the style tag , use the "@import" rule to introduce external css files.

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

1. Use the style attribute: Add the style attribute directly to the html tag inside.

<标签 style="属性1: 设定值1; 属性2: 设定值2; ">

For example:

<td style="color:blue;font-size:9pt;font-family:&#39;黑体&#39;;line-height:150%;">

The advantage of this usage is that it can flexibly apply styles to each tag, but the disadvantage is that there is no "unity" in the entire document. .

2. Use the style tag: Write the style rules in the tag.

    <style type="text/css">
    <!--
    样式规则表    -->
    </style>

For example:

    <style type="text/css">
    <!--
    BODY {
    　　color: BLUE;
    　　background: #FFFFCC;
    　　font-size: 9pt}
    TD, P {
    　　COLOR: GREEN;
    　　font-size: 9pt}    -->
    </style>

usually writes the entire structure on the webpage section.

The advantage of this usage lies in the unity of the entire document. As long as there is a declared tag, the style rule will be applied.

The disadvantage is that the flexibility of individual tags is insufficient

3. Use LINK tags:

Write the style rules in .css style file, and then import it with the tag.

Suppose we save the style rules as an example.css file. We only need to add

<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">

to the web page to apply the styles specified in the style file. Usually the LINK tag is written in the section of the web page.

The advantage of this usage is that you can assign several documents to which the same style rules apply to the same style file. The disadvantage is also the lack of flexibility in individual files or tags.

4. Use @import to introduce: It is very similar to LINK usage, but it must be placed in .

    <STYLE TYPE="text/css">
    <!--
    　　@import url(引入的样式表的位址、路径与档名);    -->
    </STYLE>

For example:

    <STYLE TYPE="text/css">
    <!--
    　　@import url(http://yourweb/ example.css);
    -->
    </STYLE>

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the four introduction methods of style sheet css?. For more information, please follow other related articles on the PHP Chinese website!