使用CSS为单个单词着色

pcww981p  于 2023-01-27  发布在  其他
关注(0)|答案(5)|浏览(147)

我想设置<pre>块中单个单词的颜色(粗略地说,是为了用语法高亮显示代码)。<font>标记被弃用,而倾向于使用CSS,这很公平;需要什么语法?特别是,单词应该被 Package 在什么元素中?我以前使用<div>来标记文本块以进行CSS样式化,但这似乎只适合标记整个段落。

omhiaaxx

omhiaaxx1#

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

xtupzzrd2#

在span上使用style属性。例如:

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

pw136qt23#

<span>
这个HTML元素是一个用于描述内容的通用内联容器,它本身并不表示任何内容。它可以用于对元素进行分组以实现样式化(使用class或id属性),或者因为它们共享属性值,例如lang。只有在没有其他语义元素适用时才应使用。<span>非常类似于<div>元素,但是<div>是块级元素,而<span>是内联元素。

fhg3lkii

fhg3lkii4#

使用<span class="red">text</span>和一些基本的CSS,如.red { color: red; }
编辑:注意类名“red”不是一个好的做法

o7jaxewo

o7jaxewo5#

这里没有标记魔法:你可以使用任何内联标记,并且你可以在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文件中修改一个值。

相关问题