html文字怎么垂直划线的

K-seo • 2024年2月7日 02:52 • 网站运维 • 阅读 188

在HTML中为文字添加垂直划线，通常是指给文本添加删除线效果，这种效果可以通过使用HTML的<del>标签或者通过CSS样式来实现，下面将详细介绍这两种方法。

使用 <del> 标签

HTML中的<del>标签用于表示文档中已被删除的文本，浏览器默认会为<del>标签内的文本添加一条中线，表现为被划掉的效果。

<p>这个商品原价是<del>100</del>元，现在只要<ins>80</ins>元！</p>

在上面的例子中，<del>标签包围的“100”会被显示为带有删除线的文字，而<ins>标签则用于表示插入的文本，这里用来显示新的价格。

使用 CSS 样式

除了使用<del>标签外，我们还可以通过CSS的text-decoration属性来给元素添加删除线。text-decoration属性可以应用于任何HTML元素，它不仅可以添加删除线，还可以添加下划线或上划线。

方法一：内联样式

内联样式是直接在HTML标签中使用style属性来定义样式。

<p style="text-decoration: line-through;">这段文字将显示为带删除线的文字。</p>

方法二：内部样式表

内部样式表是将CSS样式规则写在HTML文档的<head>部分中的<style>标签内。

<head>
<style>
.strikethrough {
    text-decoration: line-through;
}
</style>
</head>
<body>
<p class="strikethrough">这段文字将显示为带删除线的文字。</p>
</body>

方法三：外部样式表

外部样式表是最专业的应用方式，它涉及创建一个独立的CSS文件，并在HTML文件中引用该文件。

假设你有一个名为styles.css的文件，内容如下：

.strikethrough {
    text-decoration: line-through;
}

然后在你的HTML文件中链接这个CSS文件：

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="strikethrough">这段文字将显示为带删除线的文字。</p>
</body>