CSS style sheet: Link good or embed good?

css| link | style sheet

CSS stylesheet, is it good to use to invoke a separate file, or is it better to use the embedded page directly? or what exactly are the two ways to use?

In the W3CN of Atzie, he said:

Reference content

In the past, we usually used style sheets in 2 ways:

Page inline: Just write the style sheet directly in the head area of the page code. Something like this:

<style type= "Text/css" > <!--body {background:white; color:black;}--> </style>

External invocation Method: Write the stylesheet in a separate. css file, and then invoke it in the page head, similar to the following code.

<link rel= "stylesheet" rev= "stylesheet" href= "Css/style.css" type= "Text/css" media= "All"/>

In the design that conforms to the Web standard, we use the external modulation usage, the benefit is self-evident, you can change the page style without modifying the page only. css file. If all pages call the same style sheet file, changing a style sheet file can change the style of all files.

It can be seen that Atzie is highly recommended. In addition to the Atzie, the advantage of using is not only to modify the style sheet is convenient, but also to speed up the user's browsing. The first time a user opens a page that has a linked style sheet, the style sheet is automatically downloaded to the local cache. When the user opens another page and the page is linked to the same style sheet, it reads the relevant files from the cache, which speeds up browsing.

But I have also encountered this situation: sometimes the network is not smooth, the page opened, the linked style sheet did not load successfully. The consequences of this situation, not only the color of the page text, size and so on style can not be shown, but more troublesome is likely to cause the layout of the entire page messy set!

For example, once I open macromedia.com, the company network is not smooth, perhaps because there are a lot of people in BT Bar ... The result page appears to look completely like no style sheet, the familiar layout is not visible, all content from the top down, like using a mobile phone in the browsing site. Although the content can be seen all, but I have to take some time to familiarize myself with this new layout, browsing time there is a feeling of not smooth.

In doing the first page of Jinshan Online (the previous version, now can not see it), I have all the styles embedded into the area of the pages. Home page is a Web site with the largest number of pages, must ensure high reliability. And only for the first page style sheet embedded in the way, the other pages are still used, modify the style does not add too much work.

On the weekends I do Amaoagou's homepage, and I plan to go further: layout-related styles: #head, #left之类都嵌入到页面内部, and other styles in a linked way.

To sum up:

Method One: The homepage uses the embedding method completely, the other page all uses the link way. Advantages: This can ensure that the home page in the network condition is still able to correctly display. Disadvantage: When modifying a style, you need to modify the external style sheet and the style sheet embedded in the first two places.

Method Two: Writes the layout-responsible style separately from the other styles. The home page embeds the layout the style, links the other style, other pages for both sets of styles use the link way. Advantages: When you modify a style, it is less than the first workload. When the network condition is bad, the appearance of the homepage cannot guarantee completely, but the layout is not disorderly at least.

If the production is not a standard page, such as a small topic of the company's products, the leader asked to make a table to ensure that the project on-line speed. The styles used for each page: links. For a style that only one page will use, but which can be used many times: embed. For a style that only one page will use and only once: embed or simply write style= "...".