• 技术文章 >web前端 >css教程

    css怎么给删除线设置颜色

    青灯夜游青灯夜游2021-04-14 18:21:08原创810

    方法:首先在父标签p中嵌入包含文本的span标签;然后在父标签p中添加删除线样式,并使用color属性设置文本和删除线的颜色;最后在span标签中使用color属性重新设置文本颜色即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以属性text-decoration属性添加文本文字的删除线效果

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css添加文本文字的删除线</title>
    		<style>
    			p{
    				text-decoration:line-through;
    			}
    		</style>
    	</head>
    	<body>
    		<p>这里有一条删除线</p>
    	</body>
    </html>

    效果图:

    1.png

    那么如何给删除线设置颜色?下面来看看示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css添加文本文字的删除线</title>
    		<style>
    			p{
    				text-decoration:line-through;
    				color: red;
    			}
    			span{
    				color: black;
    			}
    		</style>
    	</head>
    	<body>
    		<p><span>这里有一条删除线</span></p>
    	</body>
    </html>

    效果图:

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

    (学习视频分享:css视频教程

    以上就是css怎么给删除线设置颜色的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 删除线
    上一篇:css怎么设置背景图大小 下一篇:css如何设置banner图自适应
    PHP编程就业班

    相关文章推荐

    • css怎么设置超出自动换行• css如何设置边框透明• css如何固定住元素不变• css如何设置滚动条颜色• css如何设置表格间距

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网