这两种将html页面链接到css文件的方法有什么区别？

Question

我一直在阅读有关css的一些教程,我看到了两种不同的方法来说明应该使用哪个css文件来设置页面样式:

<style type="text/css">@import url("style.css");</style>

和

<link rel="stylesheet" type="text/css" href="style.css" />

他们之间有什么区别？我应该使用哪一个？

Answer 1

根据雅虎的"加速你的网站的最佳实践",使用@include就像在Internet Explorer中将<link>放在页面底部一样.

在页面末尾加载CSS会导致页面被重新呈现.这意味着,页面首先显示没有CSS,然后用CSS重绘.这会减慢页面加载速度.

Answer 2

CSS Cascade和你应该关心的原因

它归结为CSS特性和CSS级联.仔细踩踏,知道你在做什么,CSS特异性可以成为你的朋友.

// bring CSS into the Page
<style type="text/css">@import url("importedStyles.css");</style>

/// Link to CSS Style Sheet
<link rel="stylesheet" type="text/css" href="linkedStyles.css" />

由于@import将样式带入该页面,因此这些规则将覆盖外部或"链接"样式表.由于更高的CSS特异性,内联 CSS胜出:

<span style="color: red;">I am DEFINITELY RED</span>

但是,这仅在规则具有相同特异性时才有效

请考虑以下事项:

<div class="error">I am an error message</div>

如果我在importedStyles.css中有一条规则:

.error { color: blue; } /* specificity = 10 */

"externalStyles.css"中的规则如下:

div.error { color: red; } /* specificity = 11 */

它将采用externalStyles版本

注意:内联样式的CSS特性是1000,所以除了!important标签10000之外,它胜过所有事情.另一个CSS特性文章

CSS特异性参考

• !important = 10,000
• 内联样式= 1000

• 规则中的每个#id = 100 -eg,这是200:

  #content #footer {color:red; }/*200*/

• 每个班级= 10

• 每个html元素= 1

所以,举一些例子:

body .selected { color: red; } /* 11 */
ul li { color: red; } /* 2 */
ul li.selected { color: blue; } /* 12 */

#content ul li.selected a { color: red; } /* 113 */

/* Careful, can't override this, ever */ 
a { color: blue; !important } /* 10,000 - Override everything */

所以...... Cascade仅适用于具有相同特异性的元素.在应用特异性规则后应用级联.

Answer 3

除非您使用非常旧的浏览器（netscape 4.x 和 ie 3.x），否则没有太大区别。您可以在此处阅读有关每种含义的完整内幕。

从标准的角度来看，链接到外部样式表或导入它没有区别。两种方法都是正确的，并且两种方法都同样有效（在大多数情况下）。