<span style=" text-decoration:line-throughcolor:red">199元</span><br />
<span style="font-weight:boldcolor:green">现价：99元</span>
1 用到的知识点是html中 tex-decoration 属性；text-decoration的属性包括 ： {text-decoration:overline}
{text-decoration:line-through}
{text-decoration:underline}
{text-decoration:blink}
将价格划掉的效果 用到的是line-through值。
2 下面是tex-decoration 的使用案例，代码可以直接复制到浏览器上面进行运行。
<html>
<head>
<style type="text/css">
h2 {text-decoration: line-through}
</style>
</head>
<body>
<h2>20元</h1>
</body>
</html>
3 下面是案例在浏览器上运行的效果图 ：
chrome 查看元素里被横线划掉的css，是因为属性的不支持或者层次被覆盖，解决方法如下：
1、首先新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签、span标签创建商品价格的显示。
3、在test.html文件内，使用<style type="text/css"></style>标签来标识css代码编写区。
4、在css标签内，创建div，span标签的样式设置。
5、在css标签内，设置div的样式，使用font-size设置字体大小为20px，line-height设置行高为50px。
6、在css标签内，设置span的样式，使用color设置文字颜色为红色，text-decoration设置删除线的效果。
7、在浏览器打开test.html页面，可见，实现了将价格划掉的效果。
