如何在 CSS 中添加下划线、上划线、任意线？ [关闭]答案

【问题标题】：How do I underline, overline, anyline in CSS? [closed]如何在 CSS 中添加下划线、上划线、任意线？ [关闭]
【发布时间】：2020-04-13 22:56:24
【问题描述】：

斜体我没有问题，但是当需要下划线或上划线时，我无法弄清楚。

   <!DOCTYPE html>
    <html>
    <body>
    <head>
    <title>CSS Properties</title>
    <style>

    </style>
    </head>
    </body>
    <h1>CSS Properties Quiz</h1>
    <p style="font-style: italic;">
      This is how you italicize in CSS.
    </p>
    <p>
      You can also <em>italicize</em> using <em>html</em>.
    </p>

    <p class="under">
    I hope that this underlines the text.
    </p>
    <p class="over">
      Will this overline? Probably not.
    </p>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

标签： css underline

【解决方案1】：

举例：

<p style="font-style: italic; text-decoration: overline;">

查看关于 CSS 的优秀资源： https://www.w3schools.com/css/css_text_decoration.asp

【讨论】：

如果你像这样使用style="…" 将样式内联，而不是在样式表或至少<style>…</style> 块中 - 你会后悔的。

【解决方案2】：

使用您添加到您希望以这种方式设置样式的块的 under 和 over 类，您只需要使用 text-decoration 属性提供样式规则。

这些通常会放在一个单独的 CSS 文件中，您可以在 html 文件中引用该文件，例如
<link rel="stylesheet" type="text/css" href="yourstyles.css">

或者你可以将它们放在你的 html 中的 <style> . . . </style> 块中；但通常认为更好的做法是使用单独的样式表文件。

p.under {
    text-decoration: underline;
}
p.over {
    text-decoration: overline;
}

<!DOCTYPE html>
    <html>
    <body>
    <head>
    <title>CSS Properties</title>
    <style>

    </style>
    </head>
    </body>
    <h1>CSS Properties Quiz</h1>
    <p style="font-style: italic;">
      This is how you italicize in CSS.
    </p>
    <p>
      You can also <em>italicize</em> using <em>html</em>.
    </p>

    <p class="under">
    I hope that this underlines the text.
    </p>
    <p class="over">
      Will this overline? Probably not.
    </p>

【讨论】：