Web -- CSS control page (different link and import methods), web -- cssimport

Web -- CSS control page (different link and import methods), web -- cssimport

First understand:

[1] The two web page elements "Table" and "DIV" have different purposes. First, the purpose of Table creation is to store data, and the purpose of DIV creation is to set up the page structure.

W3C, short for World Wide Web Consortium, is a W3C organization or World Wide Web Consortium. W3C standards are not a set of standards,

The standard consists of three parts: Structure and Presentation Behavior ).

Standard structured languages mainly include XHTML and XML, and standard languages mainly include CSS. Behavioral Standards mainly include object models (such as W3C DOM) and ECMAscript.

Generally, it cannot be called "DIV + CSS". To say it is "XHTML + CSS". The two names tend to be the latter.

[2] There are four CSS control pages: Intra-row style, embedded style, link style, and import style

1. Intra-row styles such as: <p style = "text-indent: 4px; font-size: 12px;"> </p>

The HTML page is not pure enough, and the file size is too large, which is not conducive to crawling by search spider, resulting in high maintenance costs.

2: Embedded styles such as:

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

If a website has many pages, each file will become larger in the embedded mode, and it will be difficult to maintain it in the future. If there are few files and there are not many CSS code, this method will also work well ~

3: The Link style is as follows:

This style completely divides HTML files and CSS files into two or more files, completely separating the HTML code of the page framework from the CSS Code, making it very convenient for preliminary production and post-maintenance, this method is recommended.

4: import styles such as @ import "style.css ";

During HTML initialization, it will be imported into the HTML file and become part of the file, similar to the embedded Style

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

[3] differences between link styles and import styles:

Link
Link is to connect external CSS with Web pages.

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

Why use @ import?
Most people use the @ import method because the old browser does not support the @ import method. This means that we can use @ import to introduce CSS styles that are only parsed by modern browsers.
Another major reason is when several external CSS files need to be introduced to your webpage. you can use link to introduce a CSS file, and then use @ import to introduce several other CSS files. this seems easier to manage.

Why link?
One of the main reasons for using link is that you can allow users to switch CSS styles. modern browsers such as Firefox, Opera, and Safari support the rel = "alternate stylesheet" attribute (you can select different styles on the browser ), of course, you can also use Javascript to enable IE to change the style.

@ Import
If the head Tab Of Your webpage is very simple and only has the @ import attribute, when the user's network speed is slow, he will see a page with no style, after the CSS file is downloaded, you can see its style. to avoid this problem, make sure that there is at least one script or link tag in the head.
04-11 update: @ import will extend the overall loading time of CSS. in IE, the file download order will be changed. For example, the script file placed after @ import will be downloaded before CSS.

Which method is used?
At present, it seems that it is more appropriate for small websites to use link (or more popular). Of course, if we need to modularize CSS management in the future, @ import will be used.

For example
You can use this method: create three CSS files (base.css/common.css/examples to better maintain the code.

Zookeeper
The link and import methods of CSS are different.

Essentially, both methods are used to load CSS files, but there are still slight differences.

Difference 1: The old ancestor's difference. Link is An XHTML label, and @ import is a method provided by CSS.
In addition to loading CSS, link labels can also do many other things, such as defining RSS and rel connection attributes. @ import can only load CSS.

Difference 2: the order of loading is different. When a page is loaded (that is, when it is browsed by a browser), the CSS referenced by link is loaded at the same time, the CSS referenced by @ import will be loaded after all the pages are downloaded. So sometimes, when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning, and the speed is quite slow (mengzhidu loads CSS by using @ import, the above problem occurs when I download and browse the dream capital web page ).

Difference 3: Differences in compatibility. Because @ import is proposed by CSS2.1, it is not supported by the old browser. @ import can be identified only when it is later than IE5, but the link label does not have this problem.

Difference 4: differences when using dom to control styles. When using javascript to control the dom to change the style, only link labels can be used, because @ import is not controllable by dom.

@ Import what is the difference between css calling and link href calling?

@ Import url ("css/main.css ");
@ Import url ("css/font.css ");
@ Import url ("css/layout.css"); -- </style Method 2 :??
<Link href = "css/tianyi.css" rel = "stylesheet" type = "text/css "/
Essentially, both methods are used to load CSS files, but there are still slight differences.
Difference 1: The old ancestor's difference. Link is An XHTML label, and @ import is a method provided by CSS.
In addition to loading CSS, link labels can also do many other things, such as defining RSS and rel connection attributes. @ import can only load CSS.
Difference 2: the order of loading is different. When a page is loaded (that is, when the page is browsed by the browser), the CSS referenced by link will work
The CSS referenced by @ import is loaded after all the pages are downloaded. So sometimes, when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning ),
When the network speed is slow, it is quite obvious (mengzhidu uses @ import to load CSS. the above problem occurs when I download and browse the mengzhidu webpage ).
Difference 3: Differences in compatibility. Because @ import is proposed by CSS2.1, it is not supported by the old browser. @ import can be identified only when it is later than IE5, but the link label does not have this problem.
Difference 4: differences when using dom to control styles. When using javascript to control the dom to change the style, only link labels can be used, because @ import is not controllable by dom. /*
These differences are roughly the same for others. From the above analysis, it is better to use the link label.
When creating and loading CSS files for standard web pages, you should also select the media to be loaded, such as screen, print, or all. */Difference 5: @ import can introduce other style sheets in css again. For example, you can create a main style sheet and then introduce other style sheets in the main style sheet, such as main.css.
--------
@ Import into sub1.css ";
@ Import into sub2.css1_1_sub1.css
--------
P {color: redmediaworkflow sub2.css
--------
. Myclass {color: blue}
This is more conducive to modification and expansion.
Tip: There is a disadvantage in this process. It will generate too many HTTP requests to the website server. Previously, it was a file, but now it is two or more files, and the pressure on the server increases, for websites with large page views
Use it with caution.