Html 使用 CSS 时给文本加下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8892883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Underlining text when using CSS
提问by SabreWolfy
I'm fairly new to CSS, so I want to ensure I'm implementing it correctly. I need to include an explanatory paragraph on a web page. I'd like it to look different, so I've included the following in the external CSS file:
我对 CSS 还很陌生，所以我想确保我正确地实现了它。我需要在网页上包含一个解释性段落。我希望它看起来不一样，所以我在外部 CSS 文件中包含了以下内容：
div.usage { font-style: italic; margin-left... margin-right... ; }
and then included <div class="usage">Explanation</div>in the HTML file. This is working as expected.
然后包含<div class="usage">Explanation</div>在 HTML 文件中。这按预期工作。
My understanding is that when using CSS, content and layout are separated. How, then, would I underline some text in my explanation? My understanding is that I should avoidthe following: <div class="usage">This is <u>very</u> important.</div>.
我的理解是使用CSS时，内容和布局是分开的。那么，我如何在解释中给某些文字加下划线？我的理解是，我应该避免以下情况：<div class="usage">This is <u>very</u> important.</div>。
回答by Nix
You are right about separating content and layout, but in this case, I would wrap it in a tag. The <u/>tag is deprecated, though. What I would use, is something like this:
您将内容和布局分开是对的，但在这种情况下，我会将其包装在一个标签中。不过，该<u/>标签已被弃用。我会使用的是这样的：
<div class="usage">This is <em>very</em> important.</div>
and
和
em { text-decoration:underline; }
The <em/>stands for emphasized text. The default is italic, so depending on your CSS reset, you may need to also reset font-syle to normal.
该<em/>代表强调文本。默认为斜体，因此根据您的 CSS 重置，您可能还需要将 font-syle 重置为正常。
As an aside, it's usually a bad idea to underline text, as most people assume underlined text are links. I would make it bold instead, or maybe even give it a background color.
顺便说一句，给文本加下划线通常是个坏主意，因为大多数人认为加下划线的文本是链接。我会把它加粗，或者甚至给它一个背景颜色。
回答by Waiting for Dev...
As you say, HTML is for content and CSS is for styling. So, you don't have to use styling stuff in your HTML. Indeed, when you think in HTML you must think in content as well in a semantic way.
正如您所说，HTML 用于内容，CSS 用于样式。因此，您不必在 HTML 中使用样式。确实，当您在 HTML 中思考时，您必须同时以语义方式思考内容。
So the class you use for your div.usageis very well chosen, because it doesn't say anything about its style, but about its semantic. Now, what about the text you want to underline? I would say that in a semantic way this is a text you want to highlight, and HTML has a good element for this: <strong>. Then, in your HTML you can override the browser default style for <strong>elements (bold) for the underline you want.
所以你使用的类div.usage是非常好的选择，因为它没有说明它的风格，而是关于它的语义。现在，你想加下划线的文字呢？我会说，从语义上讲，这是您要突出显示的文本，而 HTML 对此有一个很好的元素：<strong>. 然后，在您的 HTML 中，您可以<strong>为所需的下划线覆盖元素的浏览器默认样式（粗体）。
<div class="usage">This is <strong>very</strong> important.</div>
strong {
font-weight: normal;
text-decoration: underline;
}
If you want to have this style only for highlighted text inside of your div.usageelement, then be more specific:
如果您只想为div.usage元素内的突出显示文本使用此样式，请更具体：
.usage strong {
font-weight: normal;
text-decoration: underline;
}
Surely, you don't want to add the divto the selector (i mean .usagebetter than div.usage). This way you are ready in case you are going to code, for example, a list or a pragraph with the usagesemantic.
当然，您不想将div加到选择器中（我的意思是.usage比 好div.usage）。这样，您就可以在要编码的情况下做好准备，例如，具有usage语义的列表或短语。
回答by methodofaction
Just a bit of friendly advice, it's a good idea not to use underline on the web, as it is veryoften confused with a clickable link.
只是有点友好的建议，这是一个好主意，不使用下划线在网络上，因为它是非常往往与可点击的链接混淆。
I would suggest using
我建议使用
<strong>this is important</strong>
Which will appear bold by default.
默认情况下将显示为粗体。
Or perhaps you could use a yellow background on the text, like a highlight marker...
或者您可以在文本上使用黄色背景，例如高亮标记...
<p>text <span class='highlight'>hightlighed</span> text</p>
And put this in your CSS
并把它放在你的 CSS 中
span.highlight {
background-color: #FF9;
}
回答by nickvane
You should use one of these tags: <strong>or <em>and style them in the css.
您应该使用以下标签之一：<strong>或<em>在 css 中设置它们的样式。
.usage strong { font-weight: bold; }
In your markup you define some content that you want to emphasize (<em>) or strongly emphasize (<strong>). See http://www.w3.org/TR/html4/struct/text.html.
I would not use underline for emphasizing as this will confuse users in thinking it's a hyperlink.
在您的标记中，您定义了一些要强调 ( <em>) 或强烈强调 ( <strong>) 的内容。请参阅http://www.w3.org/TR/html4/struct/text.html。我不会使用下划线来强调，因为这会使用户误以为它是一个超链接。
回答by Jukka K. Korpela
Nowadays, people use to say that <u>markup should not be used, but few people can back this up with factual arguments (as opposite to citing purported authorities and using negative-sounding adjectives). If you really want underline (which is generally not a good idea in HTML documents, as pointed out here), then <u>is the simplest and most robust way. You would still have the liberty of later deciding that you wish to use, say, bolding instead of underlining, and then you could do it simply in CSS:
如今，人们常说<u>不应使用标记，但很少有人能用事实论证来支持这一点（与引用所谓的权威和使用听起来消极的形容词相反）。如果你真的想要下划线（这在 HTML 文档中通常不是一个好主意，正如这里指出的那样），那么<u>是最简单和最健壮的方法。您仍然可以稍后决定是否要使用粗体而不是下划线，然后您可以简单地在 CSS 中做到这一点：
u { text-decoration: none; font-weight: bold; }
For emphasis, other methods are almost always better than underlining. But there are situations where underlining is part of a conventional notation (e.g., in phonetics or mathematics), and then you might want to use <u>(and you would not want to rely on CSS).
为了强调，其他方法几乎总是比下划线好。但是在某些情况下，下划线是常规符号的一部分（例如，在语音学或数学中），然后您可能想要使用<u>（并且您不想依赖 CSS）。
回答by Jukka K. Korpela
The "text-decoration: underline" property allows you to undeline text.
"text-decoration: underline" 属性允许您取消划线文本。
回答by Murtaza
hi for underline you can take a small example here
嗨下划线，你可以在这里举一个小例子
HTML
HTML
<div>
<p>
This is just a text to check <span>underline</span> with CSS
</p>
</div>
CSS
CSS
div p { font-style: italic; }
div p span{ text-decoration: underline;}
回答by rahool
You could encapsulate the text you wish to underline in spanand specify a class for that span
您可以将要在span 中加下划线的文本封装起来，并为该span指定一个类
.underline {
text-decoration:underline;
}
<div class="usage"> This is <span class='underline'>very</span> important.</div>
回答by Adaz
you can try this:
你可以试试这个：
<div class="usage">This is <span class="underline">very</span> important.</div>
css:
css：
.underline { text-decoration: underline; }
