Basics: Style sheet CSS files are links or should be embedded?

css| link | style sheet

Does CSS stylesheet file use link to invoke a separate file, or is it better to use the <style>......</style> inline page directly? Or what exactly are the two ways to use?

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 call it in the following code in the page Head area.

<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.

This shows that Atzie is very highly recommended with <link>. In addition to the Atzie, the benefits of using <link> are not only convenient to modify the style sheet, but also to speed up the user's browsing speed. 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 the author 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!

Once I opened the macromedia.com, the company network is not smooth, perhaps because there are a lot of people downloading things. 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.

When I was doing the home page of Jinshan Online (previous version), I embedded all the styles into the

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.

summed up the following experience:

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 only this page will be used, but will use many times the style: embedded