14

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

4

5 回答 5

24

您应该使用最简单、最通用的内联元素：<span>. 对于每种类型的标记，为跨度指定一个或多个适当的类。例如：

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

看到它在行动。

更新： 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
于 2012-05-05T16:27:12.147 回答
8

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

This is a <span style="color:#f00;">sentence</span>.
于 2012-05-05T16:28:18.687 回答
5

<span>

此 HTML 元素是用于表达内容的通用内联容器，它本身并不代表任何内容。它可用于对元素进行分组以进行样式化（使用 class 或 id 属性），或者因为它们共享属性值，例如 lang。只有在没有其他语义元素是合适的时候才应该使用它。<span>非常像一个<div>元素，但<div>它是一个块级元素，而 a<span>是一个内联元素。

于 2012-05-05T16:27:32.557 回答
4

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

编辑：注意类名“red”不是一个好习惯

于 2012-05-05T16:28:43.343 回答
0

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

如果您不想要任何默认渲染，您可以使用aor fontorspan标记，当它们没有属性并且没有样式时，它们对任何东西都没有影响。如果您想要一些默认呈现，您可以使用相应的标记（如果存在），例如b粗体或u下划线。这意味着即使不使用您的样式表，也会应用一些特殊的表示。

span正如其他答案中所建议的那样，大多数人决定使用 just 。这很简单，没有人可以声称它有“错误的语义”，因为它没有。但真正的魔力在于 CSS，您使用标记只是将某些字符序列区分为一个元素，以便可以将其设置为一个单元。

font与您可能听到的大多数人所说的相反，当您真正进行一些字体设置时，使用它并没有本质上的错误。但是像<font color=red>. 如果您有大量这样的标签，而您的老板、客户或妻子告诉您使用不同的红色阴影，您将不得不更改无数标签，可能在几十个文件中。但是，如果您编写了<font class=keyword>or <a class=keyword>，或者，如果您愿意，<span class=keyword>并且您使用在所有 HTML 文件中引用的 CSS 文件，则只需更改该 CSS 文件中的一个值。

于 2012-05-05T19:31:21.967 回答