首頁 > web前端 > 前端問答 > css刪除線代碼是什麼意思

css刪除線代碼是什麼意思

青灯夜游
發布: 2022-09-14 13:59:55
原創
4292 人瀏覽過

css刪除線程式碼是「文字元素{text-decoration:line-through;}」。 css text-decoration屬性用於規定添加到文字的修飾,例如下劃線、上劃線、刪除線等;當該屬性的值設定為「line-through」時,可定義穿過文字的一條線,即實現刪除線效果。

css刪除線代碼是什麼意思

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,可以利用text-decoration屬性實現刪除線效果,實作程式碼為:

文本元素{text-decoration:line-through;}
登入後複製

text-decoration 屬性規定加入到文字的修飾,底線、上劃線、刪除線等。

描述
#none預設。定義標準的文字。
underline定義文字下的一條線。
overline定義文字上的一條線。
line-through定義穿過文字下的一條線。
blink定義閃爍的文字。

說明:

這個屬性允許對文字設定某種效果,如加刪除線。如果後代元素沒有自己的裝飾,祖先元素上設置的裝飾會「延伸」到後代元素中。不要求用戶代理支援 blink。

程式碼範例:

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

css刪除線代碼是什麼意思

透過範例可以看出,透過設定text-decoration:line-through;為p元素裡的文字文字加入了刪除線,方法簡單、方便。且可以透過css設定簡單修飾刪除線樣式,例如:顏色,範例:

<!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>
登入後複製

css刪除線代碼是什麼意思

#這樣我們結合text-decoration:line-through<span></span>樣式定義文字字體顏色的樣式,就可以實現css中刪除線與文字顏色不一的樣式效果,是不是很簡單!

(學習影片分享:web前端入門

以上是css刪除線代碼是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板