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. Chinese is a consortium of world Wide Web organizations or www. The standard is not a standard, but a set of standards.

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

The structured standard language consists mainly of XHTML and XML , the performance standard language mainly contains 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>

causes the HTML page to be impure and the file size too large. Not conducive to search spiders crawling, resulting in high maintenance costs later.

2: Inline style such as:

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

Suppose a site has very many pages. Embedded way each file will be larger, later maintenance difficult, assuming very few files, CSS code is not many. This way is also the top number of good ~

3: Link style such as:

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

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
Most 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 basic reason is that 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 most basic reasons for using link is that you can let users switch CSS styles. Modern browsers such as Firefox,opera,safari support rel= "Alternate stylesheet" attribute (you can choose a different style on the browser), Of course you can also use JavaScript to make IE support user-replaceable styles.

@import little problem.
Suppose your page head tag inside is very simple, only has the @import attribute, when the user browses the network speed is slow, he will see a no style style of the page, and then as the CSS file has been downloaded enough to see the proper style. To avoid this problem, You need to make sure that there is at least one script or link tag in the head.
04-11 Update: @import will make the overall CSS load time 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.
For now, small sites are more appropriate (or more popular) to use link, assuming, of course, that in the future we will need to @import the CSS for modular management.

Give me a sample.
Be able to use this approach: build three CSS files (base.css/common.css/page.css) and put them @ Import to also have a CSS file (style.css, other names can also, whatever you), and then just connect style.css on the page, so as to better implement the Code maintenance



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