溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用css設(shè)置刪除線樣式

發(fā)布時間：2022-03-08 13:57:30 來源：億速云 閱讀：419 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了怎么用css設(shè)置刪除線樣式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>css刪除線</title>

　　<style>

　　.demo{

　　text-decoration:line-through;

　　color:red;

　　}

　　span{color:black;}

　　</style>

　　</head>

　　<body>

　　<div>

　　<p><spanclass="demo"><span>這里有一個刪除線</span></span></p>

　　</div>

　　</body>

　　</html>

　　通過瀏覽器訪問，css刪除線實現(xiàn)效果如下圖：

　　009b6b898c6a53b94e6b75d5abb1066.png

　　這里主要用到css中的text-decoration：line-through樣式屬性。

　　首先大家應(yīng)該都知道text-decoration屬性是規(guī)定添加到文本的修飾。

　　而值為line-through則表示定義穿過文本下的一條線。

　　在上述代碼中我們結(jié)合了text-decoration：line-through；和<span></span>樣式定義文本字體顏色的樣式，來實現(xiàn)刪除線與文字顏色不一的樣式效果！

　　同理我們也可以輕松的實現(xiàn)原價現(xiàn)價的相關(guān)效果：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>css刪除線</title>

　　<style>

　　.demo{

　　text-decoration:line-through;

　　color:red;

　　}

　　span{color:black;}

　　</style>

　　</head>

　　<body>

　　<div>

　　<p>原價：<spanclass="demo"><span>500元</span></span><br>

　　現(xiàn)價：150元

　　</p>

　　</div>

　　</body>

　　</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用css設(shè)置刪除線樣式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手