css如何设置删除线

在css中，可以使用text-decoration属性设置删除线，语法“text-decoration:line -t hr ough”。text-decoration属性设置元素文本修饰，值为line-through时，定义穿过文本下的一条线。

本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电脑。

新建 test .html页面，在test.html 页面body区域内，新建一个div，用来存放物品名。在div标签内新建span，用来存放物品价格。在test.html 页面body区域内新建style标签，在style标签里设置 span标签内的价格为红色

<!DOCTY PE  html>
<html lang="en">
<head>
    < ;m eta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE= Edge ">
    <meta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0">
    <title>Document</title>
    <style>
        . PR ice{
            color: red ;
        }
    </style>
</head>
<body>
    <div>键盘:
        <span class="price">200元</span>
    </div>
</body>
</html>

在浏览器里打开test.html，看一下目前的效果

回到编辑器，在test的style标签内，给span设置text-decoration: line-through属性

<style>
        .price{
            color:red;
            text-decoration: line-through;
        }
    </style>

再次打开test.html，会发现价格上被加了删除线。

推荐学习：css视频教程

以上就是css如何设置删除线的详细内容，更多请关注其它相关文章！

总结

以上是为你收集整理的 css如何设置删除线全部内容，希望文章能够帮你解决 css如何设置删除线所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css如何设置删除线的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199717

更新时间：2023-04-27 阅读：37次