在使用CSS时如何给文本添加下划线

Question

我对CSS还不是很熟悉，所以我想确保我的实现是正确的。我需要在网页上包含一个解释段落。我想让它看起来与众不同，因此我已经在外部CSS文件中包含了以下内容：

div.usage { font-style: italic; margin-left... margin-right... ; }

并在HTML文件中包含了<div class="usage">Explanation</div>，这正常工作。

我理解当使用CSS时，内容和布局是分离的。那么，我该如何在解释中添加下划线？我的理解是应该避免使用以下代码：<div class="usage">This is <u>very</u> important.</div>。

- SabreWolfy

Answer 1

你说得没错，应该将内容和布局分离。但在这种情况下，我会将其封装在一个标签中。不过，<u/> 标签已经被弃用了。我会使用类似于以下的东西：

```html content ```

请注意，这只是一个示例。您可以根据自己的需要调整样式。

<div class="usage">This is <em>very</em> important.</div>

和

em { text-decoration:underline; }

<em/> 表示强调文本。默认为斜体，所以根据您的CSS重置，您可能还需要将字体样式重置为正常。

顺便说一下，通常不建议使用下划线突出文本，因为大多数人会认为带下划线的文本是链接。相反，我会将其设置为粗体，或甚至给它一个背景颜色。

- Nix

---

如果任何标签适合在这里使用，那肯定是<em>（或者也许是<strong>）。+1 - Wesley Murch

Answer 2

正如您所说，HTML用于内容，CSS用于样式。因此，在HTML中不必使用样式相关的东西。事实上，当您考虑HTML时，您必须以语义化的方式思考内容。

因此，您为div.usage使用的类非常合适，因为它没有说明其样式，而是说明了其语义。那么，您想要下划线的文本呢？我会说，从语义上讲，这是您想要突出显示的文本，而HTML有一个很好的元素：<strong>。然后，在您的HTML中，您可以覆盖<strong>元素（粗体）的浏览器默认样式，以获得所需的下划线效果。

<div class="usage">This is <strong>very</strong> important.</div>

strong {
  font-weight: normal;
  text-decoration: underline;
}

如果您只想让这种样式仅适用于

元素内部的突出文本，则需要更加具体：

.usage strong {
  font-weight: normal;
  text-decoration: underline;
}

当然，你不想将 div 添加到选择器中（我是说 .usage 比 div.usage 更好）。这样做可以让你随时准备编写一个列表或段落，使用语义化的usage。

- Waiting for Dev...

Answer 3

"text-decoration: underline" 属性允许您在文本下方添加下划线。

- user840210

Answer 4

你应该使用以下其中一个标签：<strong> 或 <em> 并在 CSS 中为它们设置样式。

.usage strong { font-weight: bold; }

在你的标记中，你定义了一些你想要强调（<em>）或者强烈强调（<strong>）的内容。参见http://www.w3.org/TR/html4/struct/text.html。 我不会使用下划线来强调，因为这会让用户误以为它是一个超链接。

- nickvane

Answer 5

只是一点友好的建议，最好不要在网页上使用下划线，因为它经常与可点击的链接混淆。

我建议使用

<strong>this is important</strong>

默认情况下将以粗体显示。

或者您可以在文本上使用黄色背景，就像是一个高亮标记...

<p>text <span class='highlight'>hightlighed</span> text</p>

将此放入您的CSS中

  span.highlight {
    background-color: #FF9;
  }

- methodofaction

Answer 6

你可以尝试这个：

<div class="usage">This is <span class="underline">very</span> important.</div>

CSS：

.underline { text-decoration: underline; }

- Adaz

---

谢谢。为什么我不应该使用 font-style: underline;？ - SabreWolfy

font-style 没有 underline 属性；你只能声明 italic、normal 和 oblique(http://reference.sitepoint.com/css/font-style)。 - ChrisW

@micha：好的，font-style 代表斜体，font-weight 代表粗体，text-decoration 代表下划线。 - SabreWolfy

如果目标是区分内容和呈现方式，那么class="underline"并不比<u>更好。选择代表内容的类名，而不是代表它应该长成什么样子的类名。 - Wesley Murch

我不喜欢 underline 这个类名，因为它只涉及样式而没有语义含义。如果有一天你想要更改这段文本的样式，改成非下划线、红色之类的，那么 underline 就不再适用了。在这种情况下，我会使用 <strong> HTML 元素。 - Waiting for Dev...

Answer 7

嗨，如果你想要下划线，可以在这里看一个小例子

HTML

<div>
    <p>
        This is just a text to check <span>underline</span> with CSS
    </p>

</div>

CSS

div p { font-style: italic; }

div p span{ text-decoration: underline;}

- Murtaza

Answer 8

现在，人们常说不应该使用<u>标记，但很少有人能用事实论证这一点（与引用所谓的权威和使用负面形容词相反）。如果你真的想要下划线（通常在HTML文档中不是一个好主意，正如在这里指出的那样），那么<u>是最简单、最稳健的方法。你仍然可以自由地决定以后是否希望使用加粗而不是下划线，然后你可以简单地在CSS中完成：

u { text-decoration: none; font-weight: bold; }

强调时，除了下划线之外，几乎总有更好的方法。但在某些情况下，下划线是传统符号的一部分（例如在语音学或数学中），那么您可能需要使用<u>（而不是依赖CSS）。

- Jukka K. Korpela

---

除了标签名称（u或em或strong）之外，这与使用任何其他标签相同吗？ - SabreWolfy

不，u 表示渲染默认带有下划线，如果没有 CSS 设置的话。你可能会看到它表示“这通常应该带有下划线，但我不告诉你原因。” - Jukka K. Korpela

Answer 9

您可以将想要下划线的文本封装在 span 中，并为该 span 指定一个类。

.underline {
  text-decoration:underline;
}

<div class="usage"> This is <span class='underline'>very</span> important.</div>

- rahool

---

如果目标是分离内容和表现，那么class="underline"并不比<u>更好。选择代表内容本身的类名，而不是它应该呈现出来的样式。 - Wesley Murch

我认为class="underline"比<u>更好，因为<u>已经被弃用了。是的，目标是内容和表现的分离，这也是html和css的意图。就名称而言，这是惯例问题。在这个特定的例子中，我认为“underline”这个名称更有意义。 - rahool