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

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

和

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

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

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

CSS Cascade和你应该关心的原因

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

// bring CSS into the Page


/// Link to CSS Style Sheet

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

I am DEFINITELY RED

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

请考虑以下事项:

I am an error message

如果我在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仅适用于具有相同特异性的元素.在应用特异性规则后应用级联.