首頁  >  文章  >  web前端  >  css如何新增刪除線? css text-decoration屬性設定刪除線(程式碼實例)

css如何新增刪除線? css text-decoration屬性設定刪除線(程式碼實例)

青灯夜游
青灯夜游原創
2018-10-09 14:10:0622986瀏覽

css如何新增刪除線?在之前的文章【html如何為文字文字新增刪除線?兩種方法添加刪除線(實例)】中我們已經介紹了兩種html標籤t添加刪除線的方法,本章就給大家介紹用css text-decoration屬性為文本文字添加刪除線效果,用css如何設定刪除線樣式的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

首先我們了解css text-decoration屬性,以下就簡單介紹一下:

text-decoration 屬性規定加入到文字的修飾。

說明:

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

那麼如何使用css text-decoration屬性加入文字文字的刪除線效果,下面我們透過簡單的程式碼範例,為大家詳細解說關於css刪除線的實作方法!

<!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如何新增刪除線? css text-decoration屬性設定刪除線(程式碼實例)

說明:

line-through屬性值:定義穿過文字下方的一條線。

透過範例可以看出,透過設定text-decoration:line-through;為

標籤裡的文字文字添加了刪除線,方法簡單、方便。且可以透過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如何新增刪除線? css text-decoration屬性設定刪除線(程式碼實例)

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

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多相關教學請訪問

CSS影片教學

相關推薦:

php公益培訓影片教學#

以上是css如何新增刪除線? css text-decoration屬性設定刪除線(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn