Html 使用CSS为单个单词着色

我想设置

块中单个单词的颜色（粗略地说，用于显示带有语法高亮显示的代码）。

标签不赞成使用CSS，这很公平；所需的语法是什么？特别是，单词应该包装在什么元素中？我以前使用过

标记CSS样式的文本块，但这似乎只适用于标记完整的段落。

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

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

<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

int
福
=
42

更新：StackOverflow也会高亮显示代码——上面的代码会高亮显示！它的HTML是什么样子的？查看源HTML显示第一行使用

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

span
班
=
“类型”
int
/跨度
//事情还在继续

此HTML元素是一个用于语法内容的通用内联容器， 这本身并不代表什么。它可以用于分组 用于设置样式的元素（使用类或id属性），或 因为它们共享属性值，比如lang 只有当没有其他语义元素是合适的<代码>非常有用 非常类似于

元素，但

是块级元素

是一个内联元素

---

使用带有样式属性的范围。比如：

这是一个句子。

使用

text

和一些基本的CSS，如

.red{color:red；}

---

编辑：注意类名“red”不是一个好的实践

这里没有标记魔术：您可以使用任何内联标记，并且可以在CSS中实现魔术（着色或其他格式）。从技术上讲，并非所有内联标记在

pre

中都有效，但浏览器并不真正关心。更重要的是，一些内联标记具有一些默认呈现或功能

如果不需要任何默认渲染，可以使用

a

或

font

或

span

标记，这些标记在没有属性且未设置样式时不会对任何内容产生影响。如果您想要一些默认呈现，可以使用相应的标记（如果存在），例如

b

表示粗体，或

u

表示下划线。这意味着即使没有使用样式表，也会应用一些特殊的表示

正如其他答案所建议的那样，大多数人决定只使用

span

。它很简单，没有人能声称它有“错误的语义”，因为它没有。但真正的魔力在于CSS，使用标记只是为了将某些字符序列区分为一个元素，这样就可以将其作为一个单元进行样式化

---

与你可能听到的大多数人所说的相反，当你真的在做一些字体设置时，使用

font

本身并没有什么错。但是在旧式用法中有一个实际问题，比如

。如果你有无数这样的标签，而你的老板、客户或妻子告诉你使用不同的红色，你将不得不改变无数的标签，也许是几十个文件。但是，如果您已经编写了

或

或（如果您愿意）编写了

，并且您使用了所有HTML文件中引用的CSS文件，那么您只需要更改CSS文件中的一个值。

是的，我看到的现有高亮显示工具将类与

一起使用。最好避免使用颜色之类的东西作为类名。如果将来您想将元素涂成蓝色，则必须编辑HTML中该跨度的所有内容，或者使用一个毫无意义的类名。我给出了我发现的最简单的示例，但您是对的，感谢您的精确性/提示。