HTML/CSS字体颜色 vs span样式

Question

我应该使用什么？

<span style="color:red">test</span>

或者

<font color="red">test</font>

为什么？

- Isis

---

第一个是实际上的内联CSS。 - PetrV

Answer 1

你应该使用 <span>，因为根据规范所指定，<font> 已经被弃用了，可能无法按照你的意图显示。

- Kyle

---

Span（和div）并没有被弃用，但它们也不是语义化的。换句话说，它们不会为文本添加任何“含义”。它们只应该用于分组元素而不添加含义：http://en.wikipedia.org/wiki/Span_and_div - Peter

我从未说过Span或Div已经被弃用，我认为它们永远不会被弃用。 Span的设计正是为了达到其目的：在非语义化情况下能够改变文本的某些部分。 - Kyle

我从未说过span和div已经被弃用，我也同意你的观点，它们可能永远不会被弃用。但是，假设OP使用红色文本来表示强调等含义，那么使用语义标签似乎是合理的。然而，如果文本只需要以红色着色而没有语义含义（例如，只是为了增加一些色彩），那么span是一个很好的选择。 - Peter

啊哈，我明白了。在这种情况下，您的建议是完美的，但由于原始帖子只是询问要使用哪个元素，在这两个元素中，<span>更受青睐。 :) - Kyle

Answer 2

都不应该。你应该将内容和样式分离，给HTML代码逻辑上的结构。这样想一下：对于一个盲人或者一个无法显示颜色的浏览器来说，你的代码剩下了什么？为什么你想让它变成红色呢？

很可能，你决定将文本变成红色是因为想要给它强调。所以你的HTML代码应该是：

<em>test</em>

通过这种方式，即使是非视觉浏览器也可以确保以某种方式强调文本。

下一步是将文本设置为红色。但您不希望在每个地方都添加颜色代码，更有效的方法是仅添加一次：

<style>
  em { color: red; }
</style>

这样，你网站上的所有突出显示的代码都会变成红色，使其更加一致。

- Peter

Answer 3

首选外部样式表。

<span class="myClass">test</span>

CSS

.myClass
{
color:red;
}

第二优先级为内联样式

<span style="color:red">test</span>

<font>如先前所述，已经被弃用。

- Michael

---

唯一的建议是不要使用 "myClass"，而应该使用 "redText" 或 "red"。 - jeffmcneill

Answer 4

使用样式。font标签已经被废弃了（W3C Wiki）。

- fncomp

Answer 5

<span style="color:#ffffff; font-size:18px; line-height:35px; font-family: Calibri;">Our Activities </span>

这对我很有效:) 正如上面已经提到的，“font”标签已经被弃用，至少在XHTML中是这样。使用“span”标签始终是安全的。在我的情况下，“font”可能不会给您想要的结果。

- Amar Pratap

---

很好的例子，但它并没有回答这个问题：为什么？ - jpaugh

@jpaugh，为什么要使用span标签代替已经被其他成员提到的font标签。在XHTML中，<font>标签已经被弃用。谢谢，我会编辑我的答案。 - Amar Pratap

好的，这是一种看待问题的方式。我的意思是，为什么要使用你的解决方案（不考虑其他解决方案）？你的示例有什么独特或有益之处？ - jpaugh

Answer 6

<font>标签在XHTML中已经被弃用。这意味着它的使用已经不被官方支持，不能保证未来浏览器会按照你的意图继续显示文本。

你需要使用CSS。可以使用<span>标签或单独的样式表。根据规范，<span>标签没有语义含义，只允许你更改特定区域的样式。

- Cody Gray

---

不要针对XHTML，除非你真的知道你在做什么：http://www.webdevout.net/articles/beware-of-xhtml。99.9%的所谓XHTML并不是（有效的）XHTML。 - Peter

@Peter：说得对，我承认在这个问题上有多个有效的观点。XHTML只是我的个人喜好。但值得指出的是，“目标”是指“编写有效”的XML。 - Cody Gray

Answer 7

实际上，我会说第一选择是外部样式表（External CSS），第二选择是将CSS写在当前页面头部的样式标签中（Internal CSS）。

<style type="text/css">
<!-- CSS goes here -->
</style>

第三种选择，或者说是最后的选择，我会在标签内使用CSS（内联样式）。

- Damien

---

同意。创建一个名为“red”的CSS类，将类“red”分配给标记-简单且良好的实践。 - RPM1984

实际上，“.red”不是一个很好的类名，因为它不具有语义。 “.red”只描述了类的外观而不是其含义，使用“.warning”或“.error”会更好。 - Damien

只是好奇 - 使用内联CSS作为规则是一个不好的想法吗？ - Siddharth