Ways to use CSS external style sheets

Objective

Why there is this article, the external introduction of the style there is nothing to talk about, it is

CSS code copy content to clipboard

　　

It's so simple, what else, so easy, I used to think so, you must be smarter than I am. ~_^, but as a page browsing on the micro-letter and modified to browse the time I found something wrong, because the already uploaded style sheet wood has changed, iOS okay, you can force the Refresh page. But Andro this piece has been using the micro-letter cache, has not yet refreshed the button, so I feel that the introduction of CSS problems should not be so simple visual.

Well, the following are some of their own pure nonsense, welcome to more than the elder shot bricks.

About paths

Before you say a few words about the introduction of CSS 2 ways:

Relative path (relative path), as the name implies: is the position of a CSS file relative to a reference. In physics, the teacher mentions relative motion: An object is relatively moving relative to a fixed reference to another object. We walk to see the car when we think the car to go back, the car to see us is moving forward, then the relative path is the sauce look, the directory of the Web page is our reference. Like just above the introduction of CSS code is a relative path address, test is the directory of the Web site, style.css file with this page file is the same directory level, as shown:

Then the introduction of CSS in the Web file index.html should be

CSS code copy content to clipboard

　　

If the CSS file is placed with the index.html sibling directory, called a CSS folder, like this:

If the CSS is placed with the directory that is test here

The "/" slash sign here is the root directory, which is the reference to the link between these Web pages files.

Absolute path (absolute path), since it is absolute, it means that this address is unique, independent. Relatively local, just the absolute address of the site test is f:test, relative to the server, it should be 127.0.0.1/test similar IP address.

About Path Introduction

To relative path or absolute path to the introduction of CSS files, individuals think that the local preview can choose the relative path, the project on the line when the absolute path to introduce, why? There are the following:

1. Reduce the index, the uniqueness of the absolute address can ensure that users enter the Web page, the browser directly to the index to the IP address, directly a knife lethal, no procrastination. and the relative path is going to index the directory step-by-step, this is like on the road to meet a favorite sister paper, we are shy afraid to talk to the face, so we made countless encounters after the courage to go to ask contact, to the last found sister paper early flowers have the Lord, early know so, He Bidang it ~

2. Increase the chain, for those who do SEO, we all know that the chain can bring a good weight to improve, even if it is someone else to catch our content, if it did not change to their own server address, that means that the site's reference address or our web site, the crawler will be through this picture reference address back crawl, but relative path reference Because the address changed, so the crawler crawled back to find the corresponding file, so the crawler's work is about to stop.

3. Improve the ranking, if you are a dry front-end, so many will encounter a certain favorite animation effect, HTML to get down, but do not want to directly down the CSS, so will directly call the network address in the local. When you preview this page accidentally point to the introduction of the address, will jump to the corresponding web site CSS, even if you do not have access to its home page, but you still visited his domain name, inadvertently or increased the number of visits.

Of course, the 3rd is my own yy out, as to whether we are not elegant, I hope that there are research can share your opinion slightly.

Several manifestations of absolute path

General type

We just mentioned a relatively speaking, whether it is referencing a picture or a CSS file, the path is best absolute path, so the above Style.css file's introduction address should be

CSS code copy content to clipboard

　　

This introduction seems to be correct, a variety of SEO is also achieved satisfaction, but a treasure of the practice is to do so

A certain treasure type

Taobao's CSS and JS is introduced through their CDN distributed form, and behind all with? t=20150105, this is not consistent with our approach, the next 20150105 should be this time update, in order to facilitate the memory version information, but why take "?" Question mark. So there is Google, the way the great god of this explanation can answer my heart of doubt:

Callout version number.

Easy to see recent changes. can be a date. "It's like Taobao."

Use random numbers to prevent caching.

If you change the CSS, in order to avoid browser caching, will not be updated in time to cause the page does not appear the corresponding effect, when used with a dynamic parameter, let the browser to download the CSS file again.

That's a good idea, with "?" Just to let the browser to the old version of the CSS to over, the new CSS version number. This also explains why the micro-letter browsing has been modified CSS files, but the style has not been debugged, because the micro-letter call is still the old version of the CSS file, so if you csser want to preview the first time to change the style, then the introduction of the best path is "? =xxx" A version number like this, so that the browser can reset the CSS file we have modified.

Facebook Style

If you can flip over the wall and go to Facebook, look at Facebook's CSS introduction and not quite the same as in our country, as shown in the figure:

Such a large pile of uppercase and lowercase letters is why, why is not the same as our domestic, asked a colleague, he said is similar to the hash encrypted file, so encyclopedia a hash algorithm, probably explained as follows:

The old translation of the hash (mistaken for a name and used transliteration). It is also often used as a method of information security, a data fingerprint (data fingerprint) computed by a hash algorithm (hashing algorithms) in a series of data, often used to identify whether files and data have been tampered with. To ensure that the files and materials are indeed provided by the Creator.

The last sentence is very good, and it is often used to identify whether it has been tampered with. If this CSS file is tampered with locally and on the web, it notifies the browser to reset the CSS file that has been modified and then clear the CSS cache before it. Well, when it comes to caching, it's a good thing to find a treasure cache.

A treasure of CSS refresh before and after contrast

Only this number of CSS after each F5 will be loaded once, the other CSS files are 304, what is 304? To put it simply is to enable the local caching mechanism, if the CSS is public,