Text Code-HTML Underline Code - 书目录

Text Code-HTML Underline Code

HTML Underline Code

本页演示如何在任何文本或其他HTML元素下创建下划线。

创建下划线有两种主要方式。你使用的方法取决于你想要达到的目标。实际上,有三种主要方式,但其中一种已经过时。更多关于下面的内容。

下划线文本

您可以使用CSS text-decoration属性来指定下划线应出现在您的文本下方。喜欢这个:

<p style="text-decoration:underline;">This text has been underlined</p>

删除下划线

该text-decoration属性通常用于从超链接中删除下划线。要做到这一点,只需使用text-decoration:none;。

为了演示这一点,下面的例子使用了一个有下划线的段落,但是它也包含<span>了删除下划线的元素中的文本。

<p><a href="http://www.html.am/html-codes/links/">Normal link</a></p>
<p><a href="http://www.quackit.com/css/css_hyperlinks.cfm" style="text-decoration:none;">Link with underline removed</a></p>

给任何HTML元素加下划线

您可以使用CSS border-bottom属性为任何HTML元素添加下划线。其实,这不是一个真正的下一行。它只是一个沿着元素底部的边界。这是一个例子:

<p style="border-bottom:1px solid black;">This paragraph has a bottom border.</p>

有关该border-bottom属性的好处(与所有CSS边框属性一样),是您可以为边框指定不同的样式。这里有一些给你一个想法:

<p style="border-bottom:1px solid black;">1 pixel, solid, black...</p>
<p style="border-bottom:1px dotted black;">1 pixel, dotted, black...</p>
<p style="border-bottom:10px double orange;">10 pixels, double orange...</p>
<p style="border-bottom:1px dashed green;">1 pixel, dashed green...</p>
有关更多边框样式,请查看Quackit上的HTML边框。

关于可用性的说明

在网络上标注正常文字可能会导致可用性问题。这是因为大多数网络用户习惯于将加下划线的文本与超链接相关联。这是因为浏览器通常会强调超链接(除非开发人员另有指定)。因此,除非您真的需要(或文本是超链接),否则不建议对文本加下划线。

如果您需要强调文字,请使用<em>标签。为了使文字更加重要,请使用<strong>标签。这些元素是专门为这些目的而创建的,浏览器通常会适当地呈现这些文本。

从超链接中删除下划线也会导致可用性问题。如果您选择这样做,请确保用户有其他方法来区分超链接和普通文本。通常,不同颜色的文本就足够了,但一定要使用不会对色盲用户造成问题的颜色。

133766

 

英语原文:http://www.html.am/html-codes/text/html-underline-code.cfm 由工具自动翻译,由书目录整理