使用CSS为单个单词着色

我想要设置<pre>块内单个单词的颜色（粗略地说，用于显示带有语法高亮显示的代码）。 <font>标签不赞成使用CSS，不够公平;需要什么语法？特别是用什么元素来包装这些词呢？我以前使用<div>来标记CSS样式的文本块，但这似乎只适用于标记完整段落。使用CSS为单个单词着色

来源

2012-05-05 rwallace

您应该使用最简单，最通用的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

来源

2012-05-05 16:27:12 Jon

呀，现有荧光笔我见过使用类与''。 – delicateLatticeworkFever

<span>

这个HTML元素突出显示为措辞内容的通用直列容器，，其本身不表示任何东西。它可用于将元素用于样式目的（使用类或ID属性）或，因为它们共享属性值（例如lang）。只有在没有其他语义元素是合适的时候才应该使用。 <span>非常类似于<div>元素，但<div>是块级元素，而和<span>是内联元素。

来源

2012-05-05 16:27:32 Marcx

而是https://developer.mozilla.org/en/HTML/Element/span – jack

使用带有style属性的span。像：

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

来源

2012-05-05 16:28:18

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

编辑：通知类名“红”是不是一个好的做法

来源

2012-05-05 16:28:43 zessx

最好是避免使用像颜色的类名称。如果将来你想要颜色的元素蓝，你要么不得不修改跨度的所有occurances在HTML，或有一个类名是没有意义的。 – shanethehat

我给出了我发现的最简单的例子，但你说得对，谢谢你的精确度/提示。 – zessx

这里没有标记的魔法：你可以使用任何内嵌标记，并在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文件来改变只是一个值。

来源

2012-05-05 19:31:21

使用CSS为单个单词着色

回答

相关问题