如何使用text-decoration-html教學-PHP中文網

首頁

web前端

html教學

如何使用text-decoration

php中世界最好的语言

May 30, 2018 am 11:49 AM

text-decoration使用如何

我們在網頁裡常常會使用使用CSS程式碼來物件文字內容加上底線。那我們就要用到text-decoration了，如何使用呢？今天我們先來跟大家好好介紹一下。

使用CSS屬性字：

text-decoration : none || underline || blink || overline || line-through

#text-decoration下劃線CSS單字值參數：

none : 　無裝飾

blink : 　閃爍

underline : 　底線

line-through : 　貫穿線

overline : 　上上劃線

text-decoration:none 無裝飾，通常對html底線標籤去掉底線樣式

text-decoration:underline 底線樣式

text-decoration:line-through刪除線樣式-貫穿線樣式

text-decoration:overline 上劃線樣式

HTML常規底線標籤

在HTML u標籤下劃線標籤「U」即可對物件文字加html下劃線。

實例：

<u>我被U标签加下滑线</u>

CSS控制物件下劃線屬性樣式

html u底線與CSS下劃線比較應用案例

CSS去掉html標籤劃線樣式

如果我們想去掉對應html中刪除線s標籤刪除線樣式、去掉html u底線、去掉html上劃線樣式。

1、去掉html s刪除線貫穿線樣式

.p s{text-decoration:none}

去掉p類別物件盒子裡html s標籤樣式屬性

2、去掉html u下劃線樣式

.p u{text-decoration:none}

去掉p類別物件盒子裡u標籤下劃線線樣式屬性

#五、超連結下劃線高級運用- TOP

我們接下來為大家講解常見CSS 超連結,當隨便經過時候文字物件被加下劃線。

程式碼如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" /> 
<title>下划线演示</title> 
<style> 
.yangshi a{ text-decoration:none;}
/* css注释： 鼠标经过热点文字被加下划线 */ 
.yangshi a:hover{ text-decoration:underline;}
/* 鼠标经过热点文字被加下划线 */ 
</style> 
</head> 
<body> 
<p> 
<span class="yangshi"> 
<a href="http:/www.php.cn">p</a> 
</span> 
</p> 
</body> 
</html>

請將上述程式碼複製新HTML即可查看該實例樣式。

我們進行3個盒子物件分別設定物件內文字底線、文字刪除線樣式、字體上劃線樣式。

1、css程式碼片段：

.p{text-decoration:underline}

.p_1{text-decoration:line-through}

.p_2{text-decoration:overline}

2、html程式碼片段：

我被加底線

我被加貫穿刪除線

我被加上劃線

介紹了這麼多相信大家已經掌握了text-decoration，有需要的朋友可以保存一下，也請大家持續關注本站的其他更新。

相關閱讀：

html的註解有什麼作用

CSS裡怎麼清除浮動

html中的label標籤使用方法

以上是如何使用text-decoration的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。

See all articles