如何用css設定刪除線樣式？ （代碼詳解）
- 藏色散人原創
- 2018-10-08 15:07:5120599瀏覽
本篇文章主要介紹關於css刪除線的設定實作方法。
相信大家在瀏覽各大商城網站時，都會看到一些關於產品促銷的效果，例如某個產品的原價標記為多少，現價又改成了多少，並且為了用戶發現更直觀的差距，通常會在原價上添加一個明顯的刪除線！
當然除了商城網站上會出現這樣的效果，在我們普通網站或論壇站上，為了更美觀更簡潔得展現網站內容，也會使用css實現刪除線效果！
那麼要如何使用css實作刪除線樣式呢？
下面我們透過簡單的程式碼範例，為大家詳細解說關於css刪除線的實作方法！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css删除线</title>
<style>
.demo{
text-decoration:line-through;
color: red;
}
span{color:black;}
</style>
</head>
<body>
<div>
<p><span class="demo"><span>这里有一个删除线</span></span></p>
</div>
</body>
</html>透過瀏覽器訪問，css刪除線實現效果如下圖：
這裡主要用到css中的text-decoration：line-through樣式屬性。
首先大家應該都知道text-decoration 屬性是規定加入到文字的修飾。
而值為line-through則表示定義穿過文字下的一條線。
在上述程式碼中我們結合了text-decoration：line-through；和樣式定義文字字體顏色的樣式，來實現刪除線與文字顏色不一的樣式效果！
同理我們也可以輕鬆的實現原價現價的相關效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css删除线</title>
<style>
.demo{
text-decoration:line-through;
color: red;
}
span{color:black;}
</style>
</head>
<body>
<div>
<p>原价：<span class="demo"><span>500元</span></span><br>
现价：150元
</p>
</div>
</body>
</html>如下圖：
以上就是關於css設定刪除線以及刪除線顏色控制的具體實作方法！非常簡單易懂，希望對有需要的朋友有幫助！
以上是如何用css設定刪除線樣式？ （代碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS中頁面引用（詳解）下一篇：CSS中頁面引用（詳解）