Question

在我的Web应用程序中，我想突出显示一段文本，以便看起来有人用某种颜色绘制了它。中型应用程序也使用这种效果。

（我想在这里显示这种效果的图像，但是由于我还没有足够的声望点，所以stackoverflow不允许我发布它。）

我需要什么样的CSS和/或HTML标记？

作为旁注：我的应用是用React编写的。

Answer 1

您需要为此使用语义<mark>标记：

<p>This is some <mark>marked text</mark>.</p>

然后您可以使用CSS任意设置样式：

mark {
  background-color: HotPink;
}

<p>This is additional <mark>marked text</mark>.</p>

Answer 2

有很多方法可以做到：

使用HTML <mark>标签突出显示

Here is an example of <mark>highlighted text</mark> using the &lt;mark&gt; tag.

仅使用HTML代码突出显示文本

<span style="background-color: #FFFF00">Yellow text.</span>

使用CSS和HTML突出显示文本

body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;

<span class="highlight">Highlighted Text</span>

Answer 3

应用程序是否在其他任何框架上用React编写都没有关系。您始终可以为基本html标记定义CSS，例如@Salaman建议。

您可以使用@Salman提供的示例，但我建议进行一些小的修改。

mark.hotPink {
  background-color: HotPink;
}

<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>

<p>Also, you can check out our <mark>standard offers as well</mark>.</p>

您可以为标记编写CSS，但是您可能不想为每个标记标记都这样做（因为您不知道系统的其他部分是否会受到此影响。最好的（最安全的方法是创建一个自定义类（即class =“ hotPink”并将其分配给您的商标。

希望这会有所帮助！：）

我需要将哪个CSS标记为高亮显示？

3 个答案: