Question

我遇到过两种使用外部样式表的方式

<link href="CSS/div1.css" rel="stylesheet" type="text/css" />
<link href="CSS/div2.css" rel="stylesheet" type="text/css" />
<link href="CSS/div3.css" rel="stylesheet" type="text/css" />

像这样导入所有样式表另一个是使用一个样式表并在其中导入其他样式表

<link href="CSS/div1.css" rel="stylesheet" type="text/css" /> and inside this
@import url('../CSS/div2.css');
@import url('../CSS/div3.css');
.crazy
{
 display:block;
 background-color:Black;
 color:White;
}

我在某处读到了第二种方法更好，所以我构建了一个演示并在第一种情况下检查了firebug中的一个它需要16ms并且还下载了较少字节的数据但是在第二种方法中需要109ms并且下载了更多的字节因此我混淆了哪种方法更好。

Answer 1

第一个是建议的那个，因为浏览器渲染它们很麻烦More on Steve's site

Answer 2

第一个去吧！你的测试结果很清楚！

Answer 3

从历史上看，@import已被使用，因为旧版本的IE和Netscape不支持它，因此可以轻松地从这些浏览器中隐藏更高级的CSS。现在这不是一个问题，当您需要使用CSS定位特定浏览器时，建议使用其他技术。

至于你的测试，虽然是技术原因，为什么第二种方法会“慢”，我认为简单看看Firebug几乎不能用作经验证据。

Answer 4

我总是选择第一个W3C节目

http://www.w3schools.com/css/css_howto.asp

以下哪一项是使用外部样式表的更好方法？

4 个答案: