Html 使用 CSS 为单个单词着色

Coloring a single word with CSS

提问by rwallace

I want to set the color of individual words within a <pre>block (roughly speaking, for displaying code with syntax highlighting). The <font>tag is deprecated in favor of using CSS, fair enough; what's the required syntax? In particular, in what element should the words be wrapped? I've previously used <div>to mark chunks of text for CSS styling, but that would seem only suitable for marking full paragraphs.

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

回答by Jon

You should use the simplest, most generic inlineelement: <span>. For each type of token, give one or more appropriate classes to the span. For example:

您应该使用最简单、最通用的内联元素：<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.

看到它在行动。

Update:StackOverflow also does code highlighting -- the code just above is highlighted! What does the HTML for that look like? Viewing the source HTML shows that the first line is highlighted using

更新：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

回答by John Stimac

Use span with a style attribute on it. Like:

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

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

回答by Marcx

<span>

<span>

This HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span>is very much like a <div>element, but <div>is a block-level element whereas a <span>is an inline element.

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

回答by zessx

Use <span class="red">text</span>and some basic CSS like .red { color: red; }

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

Edit : notice class name "red" isn't a good practice

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

回答by Jukka K. Korpela

There's no markup magic here: you can use any inline markup, and you do the magic (coloring or other formatting) in CSS. Technically, not all inline markup is valid inside pre, but browsers don't really care. It's more important that some inline markup has some default rendering or functionality.

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

If you don't want any default rendering, you can use aor fontor spanmarkup, which have no impact on anything when they don't have attributes and they are not styled. If you want some default rendering, you can use corresponding markup, if it exists, such as bfor bold, or ufor underline. This means that some special presentation is applied even if your stylesheet is not used.

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

Most people decide to use just span, as suggested in other answers. It's simple, and nobody can claim that it has “wrong semantics”, because it has none. But the magic is really in CSS, and you use markup just to distinguish some sequence of characters as an element, so that it can be styled as a unit.

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

Contrary to what you probably hear most people saying, there is nothing inherently wrong with using fontwhen you are really doing some font settings. But there is a practical problem in the old-style usage like <font color=red>. If you have gazillion tags like that and your boss or customer or wife tells you to use a different shade of red, you will have to change myriads of tags, perhaps in dozens of files. But if you have written <font class=keyword>or <a class=keyword>or, if you prefer, <span class=keyword>, and you use a CSS file referred to in all of your HTML files, you will need to change just one value in that CSS file.

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