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

如何使用text-decoration

php中世界最好的语言

發布： 2018-05-30 11:49:00

原創

5495 人瀏覽過

我們在網頁裡常常會使用使用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，有需要的朋友可以保存一下，也請大家持續關注本站的其他更新。