Html中如何使用css样式设置删除线的方法和实例介绍及使用技巧

频道：问答 日期： 浏览：5

在HTML中，可以通过CSS样式设置删除线，为网页文本增添不同的视觉效果，常用于展示商品原价等场景。以下为你介绍设置删除线的方法、实例及使用技巧。

方法介绍

在CSS里，使用 text-decoration 属性来设置删除线。该属性有多个取值，设置删除线时使用 line-through 值。

语法如下：

selector {
    text-decoration: line-through;
}

其中，selector 是要应用该样式的HTML元素选择器，可以是元素名、类名、ID等。

实例介绍

内联样式

内联样式是直接在HTML标签的 style 属性中添加CSS代码。

Html中如何使用css样式设置删除线的方法和实例介绍及使用技巧

<p style="text-decoration: line-through;">这是一段带有删除线的文本。</p>

在浏览器中显示时，“这是一段带有删除线的文本。” 会显示为带有删除线的样式。

内部样式表

内部样式表是在HTML文档的 <head> 标签中使用 <style> 标签定义CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置删除线实例</title>
    <style>
        p {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p>所有段落文本都会显示删除线。</p>
    <p>这也是一个段落。</p>
</body>
</html>

上述代码中，所有 <p> 标签内的文本都会显示为带有删除线的样式。

外部样式表

外部样式表是将CSS代码存放在一个独立的 .css 文件中，然后在HTML文档中通过 <link> 标签引入。

首先，创建一个名为 styles.css 的文件，内容如下：

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

然后，在HTML文件中引入该样式表：

Html中如何使用css样式设置删除线的方法和实例介绍及使用技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置删除线实例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="strikethrough">这段文本会显示删除线。</p>
    <p>这段文本没有应用删除线样式。</p>
</body>
</html>

这样，只有添加了 strikethrough 类的 <p> 标签内的文本会显示删除线。

使用技巧

结合其他文本装饰

text-decoration 属性可以同时设置多个值，用空格分隔。例如，同时设置删除线和下划线：

p {
    text-decoration: line-through underline;
}

设置删除线颜色

在CSS3中，可以使用 text-decoration-color 属性来设置删除线的颜色。

p {
    text-decoration: line-through;
    text-decoration-color: red;
}

控制删除线样式

可以使用 text-decoration-style 属性来控制删除线的样式，如虚线、双实线等。

p {
    text-decoration: line-through;
    text-decoration-style: dotted;
}

常见的取值有 solid（实线）、double（双实线）、dotted（虚线）、dashed（破折线）等。