css如何添加删除线?css text-decoration属性设置删除线(代码实例)

css如何添加删除线?在之前的文章【html如何给文本文字添加删除线?两种方法添加删除线(实例)】中我们已经介绍了两种html标签t添加删除线的方法,本章就给大家介绍用css text-decoration属性为文本文字添加删除线效果,用css如何设置删除线样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们了解css text-decoration属性,下面就简单介绍一下:

text-decoration 属性规定添加到文本的修饰。

说明:

这个属性允许对文本设置某种效果,如加删除线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

立即学习“前端免费学习笔记(深入)”;

那么如何使用css text-decoration属性添加文本文字的删除线效果,下面我们通过简单的代码示例,为大家详细解说关于css删除线的实现方法!

css添加文本文字的删除线p{text-decoration:line-through;}

这里有一条删除线

效果图:

1.jpg

说明:

line-through属性值:定义穿过文本下的一条线。

通过例子可以看出,通过设置text-decoration:line-through;为

标签里的文本文字添加了删除线,方法简单、方便。且可以通过css设置简单修饰删除线样式,比如:颜色,例:

css添加文本文字的删除线p{text-decoration:line-through;color: red;}span{color: black;}

这里有一条删除线

效果图:

2.jpg

这样我们结合text-decoration:line-through;和样式定义文本字体颜色的样式,就可以实现css中删除线与文字颜色不一的样式效果,是不是很简单!

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程!

相关推荐:php公益培训视频教程

以上就是css如何添加删除线?css text-decoration属性设置删除线(代码实例)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1612234.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:51:13
下一篇 2025年12月24日 02:51:29

相关推荐

  • 如何使用纯CSS实现大白的形象(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现大白的形象(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 整个人物分为 3 部分…

    好文分享 2025年12月24日
    000
  • 如何使用纯CSS实现圆点错觉的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现圆点错觉的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 此项目无用户自定义…

    2025年12月24日
    000
  • 如何利用css3中的transform skewX实现平行四边形的导航菜单

    本篇文章给大家带来的内容是关于如何利用css3中的transform skewx实现平行四边形的导航菜单,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。在视觉设计中,平行四边形往往可以传达出一种动感。让我…

    好文分享 2025年12月24日
    000
  • CSS 小结笔记之变形、过渡与动画的示例

    这篇文章主要介绍了css 小结笔记之变形、过渡与动画的示例的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 1、过渡 transition  过渡属性用法: transition :ransition-property  transition-duration  tran…

    2025年12月24日 好文分享
    000
  • css设置多列等高布局的方法示例

    这篇文章主要介绍了css设置多列等高布局的方法示例的相关资料,小有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 初始时,多个列内容大小不同,高度不同。现在需要设置不同的背景来显示,而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。 最终需要的效果:   1. 真实等高布…

    2025年12月24日 好文分享
    000
  • 如何使用纯CSS实现类似脉动的loader(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现类似脉动的loader(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 do…

    2025年12月24日
    000
  • 如何使用纯CSS实现从按钮两侧滑入装饰元素的悬停特效(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现从按钮两侧滑入装饰元素的悬停特效(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 …

    2025年12月24日
    000
  • css中display:none与visibility:hidden的区别分析

    本篇文章给大家带来的内容是关于css中display:none与visibility:hidden的区别分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 还记得面试时被问起”请说说display:none和visibility:hidden的区别”吗?是不…

    2025年12月24日
    000
  • 如何用css做form表单?css form表单制作的方法

    网页中的表单是用于搜集用户的输入,简而言之,就是表单是网页与用户交互的一个不可或缺的元素,也就是说表单是用于向服务器传输数据的,总而言之,表单在网页中是非常重要的,所以,接下来的这篇文章将给大家来介绍如何用css来制作一个form表单,话不多说,让我们来看一下用css做form表单的具体内容。 首先…

    2025年12月24日
    000
  • 图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式

    在页面布局时经常会用到input输入框,有时为了提示用户输入正确的信息,需要用placeholder属性加以说明。这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder属性的样式,感兴趣的朋友可以参考一下,希望对你有所帮助! placeholder 是HTML5 中新…

    2025年12月24日
    000
  • 如何使用D3和GSAP实现一个舞动的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用d3和gsap实现一个舞动的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • 图文详解CSS文本溢出显示省略号效果(text-overflow)

    在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲css中如何用text-overflow实现超出部分显示省略号。对css文字溢出加省略号这个知识不熟悉的小伙伴可以参考一下,希望可以帮助到你! text-overflow属性表示当文本超出包含它的元素时…

    2025年12月24日
    000
  • CSS如何设置文字间距?

    css文字与文字之间的间距怎么调整?相信有很多小伙伴都会有这样的疑问。本章就给大家介绍css设置文字间距的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 一、css word-spacing属性设置字间距(单词的间距) word-spacing 属性增加或减少单词间的空白(即…

    2025年12月24日
    000
  • 如何使用纯CSS实现电源开关控件(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现电源开关控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,包含 …

    2025年12月24日
    000
  • css选择器优先级顺序是什么?css基本选择器优先级的介绍

    css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 在看css选择器优先级顺序前,我们先来简单说说css基本选择器有哪些? 1、标记选择器(如:body,div,p…

    好文分享 2025年12月24日
    000
  • 如何使用CSS实现滚动的图片栏(附代码)

    本篇文章给大家带来的内容是关于如何使用css实现滚动的图片栏(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在一些网站上可以经常看到有一些图片进行持续不断的滚动,这个效果可以通过css的动画效果来实现。具体效果如下 主要原理是通过动画向左移动。 首先给出两组一样的图片(同…

    2025年12月24日
    000
  • 如何使用css实现翻转图片的效果(附代码)

    本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 具体效果图如下: 主要用到的技术除了3D翻转和定位 ,还用到了一个新的属性 backface-visibility:visable|hidden; 该属性主要是用…

    2025年12月24日
    000
  • 如何用CSS制作一个三角形(附代码)

    css中的属性非常神奇,它可以制作很多我们意想不到的图形。这篇文章主要想和大家分享如何用css制作一个三角形,感兴趣的朋友可以参考一下,希望对你有所帮助。 首先我们新建一个100×100的正方形div,为了方便我们查看,设置一个背景颜色。  css代码如下: width: 100px;he…

    2025年12月24日 好文分享
    000
  • css怎么能清除浏览器默认样式?(代码)

    本篇文章给大家带来的内容是关于css怎么能清除浏览器默认样式?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css清除浏览器默认样式(代替 *{})  将代码放入 css 文件,使用 link 引入。 /* v2.0 | 20110126http://meyerweb.com/er…

    好文分享 2025年12月24日
    000
  • 图文详解CSS中颜色的四种表示方法

    在页面布局时必然会用到颜色,好看的颜色搭配会给页面增色不少,那你知道页面中的颜色怎么设置吗?这篇文章就和大家讲讲颜色的多种表示方法,还不知道颜色值表示方法的小伙伴可以参考一下,希望对你有所帮助! 一、英文单词表示颜色 最直接、最简单的方法,用颜色的英文单词表示,比如:红色我们可以写成color:re…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信