Html 哪种CSS组织方法最快？

如果我有以下HTML：

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<p id="p4">Paragraph 4</p>

或者按CSS样式，如下所示：

#p1 { font-size:12px; color:red; }
#p2 { font-size:12px; color:blue; }
#p3 { font-size:11px; color:red; }
#p4 { font-size=11px; color:blue; }

#p1, #p2 { font-size: 12px; }
#p3, #p4 { font-size: 11px; }
#p1, #p3 { color:red; }
#p2, #p4 { color:blue; }

哪一个，如果有的话，读取和处理速度会更快

编辑：我应该提到，我现在正在与GreaseMonkey合作，这意味着两件潜在的重要事情：

1我不能编辑任何HTML，只能编辑CSS

---

2页面正常加载完成后，我的所有CSS都会被读取。

您可能应该在不同的浏览器中对此进行分析，因为它们可能会给您带来不同的结果。

您可能应该在不同的浏览器中对此进行分析，因为它们可能会给您带来不同的结果。

，第二个肯定会读得更快，因为它更小

---

就处理而言，使用哪种浏览器？除非讨论中的样式表涉及数万个ID，否则我怀疑您是否会看到两者之间有任何显著的区别。

好吧，第二个肯定会读得更快，因为它更小

---

就处理而言，使用哪种浏览器？除非所讨论的样式表涉及数万个ID，否则我怀疑您是否会看到两者之间的任何显著差异。

我不认为CSS处理会成为页面加载时间的瓶颈。如果希望页面加载更快，请减小HTML/CSS的大小，并将CSS粘贴到HTML头标记中的样式标记中。这将避免额外的GET请求，我猜这是加载时间缓慢的实际原因。

我不认为CSS处理会成为页面加载时间的瓶颈。如果希望页面加载更快，请减小HTML/CSS的大小，并将CSS粘贴到HTML头标记中的样式标记中。这将避免额外的GET请求，我猜这是缓慢加载时间的实际来源。

为什么不：

然后：

为什么不：

然后：

---

你赢了我。这也是一个不错的选择，但这取决于你的标记，有时这是值得做的，但并不总是这样。我不是特别喜欢你的解决方案，因为你基本上是在课堂上包括演示细节。如果有一天蓝色的东西会变成绿色呢？你必须修改你的css，这样说。蓝色{color:green；}。Stefano，我的想法是尽可能地将内容和表示分离。一旦HTML页面准备好了，我宁愿从现在开始只编辑CSS文件。顺便说一下，很抱歉对这个答案进行了多次编辑。安装了FF 3.6b3，我在该网站上遇到标记问题编辑图标消失，代码标记中的行消失等。我是唯一一个吗？我同意你的观点，但我的反对意见与css类名有关，css类名应该表达意思，而不是表达。同意。很明显，这只是懒洋洋的，快速的打字：你赢了我。这也是一个不错的选择，但这取决于你的标记，有时这是值得做的，但并不总是这样。我不是特别喜欢你的解决方案，因为你基本上是在课堂上包括演示细节。如果有一天蓝色的东西会变成绿色呢？你必须修改你的css，这样说。蓝色{color:green；}。Stefano，我的想法是尽可能地将内容和表示分离。一旦HTML页面准备好了，我宁愿从现在开始只编辑CSS文件。顺便说一下，很抱歉对这个答案进行了多次编辑。安装了FF 3.6b3，我在该网站上遇到标记问题编辑图标消失，代码标记中的行消失等。我是唯一一个吗？我同意你的观点，但我的反对意见与css类名有关，css类名应该表达意思，而不是表达。同意。显然，这只是一种懒惰、快速的输入：在动态页面中不一定推荐使用，除了少量的CSS，因为这样会失去缓存的好处。对于可重用性也不是很好。CSS几乎永远不会成为瓶颈，即使是作为一个包含，所以我一般不会自己做这件事。您可能不需要将页面优化到将所有CSS都放在HTML文件中的程度。在动态页面中不一定推荐使用CSS，但少量CSS除外，因为这样会失去缓存的好处。对于可重用性也不是很好。CSS几乎永远不会成为瓶颈，即使是作为一个包含，所以我一般不会自己做这件事。您可能不需要将页面优化到将所有CSS都放在HTML文件中的程度。

.red {color: red}
.blue {color: blue}
.small {font-size: 11}
.big {font-size: 12}

<p id="p1" class="big red">Paragraph 1</p>
<p id="p2" class="big blue">Paragraph 2</p>
<p id="p3" class="small red">Paragraph 3</p>
<p id="p4" class="small blue">Paragraph 4</p>