Question

我想在<pre>块中设置单个单词的颜色（粗略地说，用于显示带语法高亮的代码）。不推荐<font>标签支持使用CSS，这是公平的;什么是必需的语法？特别是，应该用什么元素包裹这些词？我之前使用<div>来标记CSS样式的文本块，但这似乎只适用于标记完整的段落。

Answer 1

您应该使用最简单，最通用的inline元素：<span>。对于每种类型的令牌，请为跨度提供一个或多个适当的类。例如：

<span class="type">int</span>
<span class="name">foo</span>
<span class="op">=</span>
<span class="number literal">42</span>

See it in action

更新： StackOverflow也会执行代码突出显示 - 上面的代码突出显示！ HTML的外观是什么样的？查看源HTML显示第一行使用

突出显示

<span class="tag">&lt;span</span>
<span class="pln"> </span>
<span class="atn">class</span>
<span class="pun">=</span>
<span class="atv">"type"</span>
<span class="tag">&gt;</span>
<span class="pln">int</span>
<span class="tag">&lt;/span&gt;</span>

// and it goes on

Answer 2

使用带有样式属性的span。像：

This is a <span style="color:#f00;">sentence</span>.

Answer 3

<span>

此HTML元素是用于表示内容的通用内联容器，这本身并不代表什么。它可以用来分组用于样式目的的元素（使用class或id属性），或因为它们共享属性值，例如lang。应该使用它只有当没有其他语义元素是合适的时候。 <span>非常很像<div>元素，但<div>是块级元素 <span>是内联元素。

Answer 4

使用<span class="red">text</span>和一些基本的CSS，例如.red { color: red; }

编辑：通知班级名称“红色”不是一个好习惯

Answer 5

这里没有标记魔法：你可以使用任何内联标记，并在CSS中进行魔术（着色或其他格式化）。从技术上讲，并非所有内联标记在pre内都有效，但浏览器并不真正关心。更重要的是，某些内联标记具有一些默认渲染或功能。

如果您不想要任何默认呈现，可以使用a或font或span标记，这些标记在没有属性的情况下对任何内容都没有影响没有风格。如果您需要某些默认呈现，则可以使用相应的标记（如果存在），例如b表示粗体，或u表示下划线。这意味着即使未使用样式表，也会应用一些特殊的演示文稿。

大多数人决定只使用其他答案中建议的span。它很简单，没有人可以声称它有“错误的语义”，因为它没有。但魔术真的在CSS中，你使用标记只是为了将一些字符序列区分为一个元素，因此可以将它设置为一个单元。

与您可能听到的大多数人所说的相反，当您真正进行某些字体设置时，使用font并没有任何内在错误。但是像<font color=red>这样的旧式用法存在一个实际问题。如果你有这样的大量标签，你的老板或客户或妻子告诉你使用不同的红色，你将不得不改变无数的标签，可能在几十个文件中。但是，如果您已经编写了<font class=keyword>或<a class=keyword>，或者如果您愿意，<span class=keyword>，并且您使用了所有HTML文件中引用的CSS文件，那么您只需要更改一个该CSS文件中的值。

使用CSS着色单个单词

5 个答案: