How CSS style sheets are referenced

1, outside how to use the file; (recommended)

2, using @import reference external CSS file;

3, internal document header Method is also called embedded method call;

4, direct plug-in is also called Line inner style.

Their main difference is that they specify a different range of styles to use:


　　One, external file reference method

External file references the CSS is written in a file, the HTML document header through the file reference for style control.

That is, the file that writes the CSS property is saved as the file name extension. CSS file.

The reference to the CSS file is to write the following statement between the markup of the HTML:

<link rel="stylesheet" href="css/test. CSS">

If the current file directory has a CSS file named Mystyle.css, the content is as follows:

    p{         font-family:' song body ';    Font-size:9pt;    Color:blue;    }    h2{          Font-family:' song body ';    Font-size:13pt;    color:red;    }

Then in the reference Yes, use the following statement:

<link rel="stylesheet" href="css/test. CSS">

Of course, you can copy this sentence and then change the path and file name of the referenced file.

One of the biggest benefits of applying a CSS file is that you can reference the file in every HTML file, so that the HMTL file of the entire site is consistent in style and avoids duplicate CSS property settings;

In addition, when you meet the revision or make some major adjustments to modify the style, you can directly modify the CSS file,

Of course, the HTML file has been referencing the most recently updated style sheet without having to modify each HTML file.

If the site at the beginning of the building without a unified layout of the website style and form a CSS file, after a lot of content, want to adjust the style will be exhausted you.


　　ii. using @import to refer to external CSS files

In this way , the external CSS is referenced using the style tag between the document header

    <style type="text/css">    <!--    @import url (mystyle.css); /* here is the style content of CSS referenced by @import　　*/    -    </Style>

　　Third, internal document header mode

This approach differs from the external file approach in that it defines the style directly between the header

The scope of this style definition is limited to this file, and its format is as follows (apply the CSS above)

    <style type="text/css">    <!--    p{          font-family:' Song Body '　　;    Font-size:9pt;    Color:blue         }    h2{         font-family:' song body ';    Font-size:13pt;    color:red;    -    　　    </Style>

The main use of this approach is that, in some aspects of the unified style of the premise, the specific page can be specific adjustments. These two ways are not mutually exclusive, but are combined,

For example, in the CSS file defines the P flag font size font-size to 10pt, and in the internal document can be defined P flag font color Font-color red;

And in another HTML file that defines the color green, from here, you may also understand why style styles are called Cascading style sheets.

　　Iv. Direct Plug-in

The direct plug-in is simple, just write CSS properties after each HTML tag.

This is straightforward, as we want to specify that the word in a table flag is red and the font size is 10pt, you can write as follows:
　　

<table style="color:red;font-size:10pt" />

This approach is mainly used to make specific adjustments to specific marks, the scope of which is limited to this mark.

To sum up, these several ways each have a purpose, in the unity of the entire site style, in the first way in the entire page style unified,

The third way is to use a specific fine-tuning of a tag in the page, and a second method is also useful The land of Wu, so the difference!

The first three are intended to be a unified style, and the second is to reduce the cumbersome tag attributes set, it is very good!