WEB--CSS control page (link and import method differ)

First understand:

"1" "table" and "DIV" the two page elements of the birth of the purpose of different, first Table was born to store data, and DIV was born to set up the page structure

World Wide is the acronym for WEB Consortium, and Chinese is a consortium of organizations or www. The standard is not a standard, but a set of standards,

Contains three parts of the standard: structure (Structure), performance (Presentation) behavior (Behavior).

structured standard languages mainly include XHTML and XML , the performance standard language mainly includes CSS , the behavior standard mainly includes the object model (such as the ECMAscript DOM), wait

Generally can not be said to be "div+css", to say as "xhtml+css", two kinds of names tend to the latter.

The "2" CSS control page has four ways: inline style, inline style, link style, import style

1. In-line style such as: <p style= "TEXT-INDENT:4PX; font-size:12px; " ></p>

will lead to the HTML page is not pure, file size is too large, not conducive to search spider crawling, resulting in high maintenance costs later.

2: Inline style such as:

#left_side {color: #909090; font-size:24px;} </style>...

If a site has a lot of pages, embedded way each file will become larger, later maintenance difficult, if the file is very small, CSS code is not many, this way also top number good ~

3: Link style such as:

This style of HTML files and CSS files are completely divided into two or more files, the implementation of the page frame HTML code and performance CSS code complete separation, making pre-production and post-maintenance is very convenient, recommended use this way.

4: Import style such as: @import "Style.css";

When HTML is initialized, it is imported into the HTML file and becomes part of the file, similar to the inline style

=============================================================================================================== =

The difference between the "3" link style and the imported style:

Link
Link is to connect the external CSS with the Web page.

@import
The difference between the import text and link is that it can introduce several other CSS files into a CSS file.

Why use @import
The majority of people who use the @import approach are because the old browsers do not support the @import approach, which means that we can use @import to introduce CSS styles that are only parsed by modern browsers.
Another major reason is when your Web page needs to introduce several external CSS files. You can use link to introduce a CSS, and then in this CSS file in the @import way to introduce a few other CSS files. This looks easier to manage.

Why use link
One of the main reasons for using link is that you can let the user switch CSS styles. Modern browsers such as Firefox,opera,safari support the rel= "Alternate stylesheet" property (you can choose a different style on the browser), Of course you can also use JavaScript to make IE also support user-replaceable styles.

@import little problem.
If your page head tag is very simple, only the @import attribute, when the user browsing speed is slow, he will see a no style style of the page, and then as the CSS file is downloaded to see the proper style. To avoid such problems, You need to make sure that there is at least one script or link tag in the head.
04-11 Update: @import will cause the overall loading time of the CSS to be longer. And in IE, the file download order is changed, for example, the script file placed behind @import will be downloaded before the CSS.

In that way, exactly.
At the moment it seems that the small site is more appropriate (or more popular) to use link, of course, if we need to put the CSS in the future of modular management will certainly use @import.

As an example,
You can use this procedure: build three CSS files (base.css/common.css/page.css) and put them @ Import to another CSS file (style.css, other names can also, whatever you), and then only connect style.css on the page, so as to better implement the Code maintenance



WEB--CSS control page (link and import method differ)