7.11日音訊,css刪除線的基礎(chǔ)和高級應(yīng)用。css的刪除線在網(wǎng)頁中應(yīng)用的不是很多,可能這和不同的網(wǎng)站類型有關(guān)系,但在產(chǎn)品促銷時卻經(jīng)常用到,如原價的數(shù)字上會加上刪除線讓新的價格更加明顯和區(qū)分,當(dāng)然它的樣式也是有很多應(yīng)用的方式,下面
邯鄲網(wǎng)站建設(shè)首創(chuàng)網(wǎng)絡(luò)給大家說一下它的一些應(yīng)用,希望和大家一塊學(xué)習(xí)。
1、CSS控制下劃線出現(xiàn)用到地方
在DIVCSS網(wǎng)頁中常常使用CSS代碼來人對象文字內(nèi)容加上下劃線。
使用CSS屬性單詞:
text-decoration-CSS
text-decoration:none||underline||blink||overline||line-through
text-decoration下劃線CSS單詞值參數(shù):
none:無裝飾
blink:閃爍
underline:下劃線
line-through:貫穿線
overline:上劃線
text-decoration:none無裝飾,通常對html下劃線標(biāo)簽去掉下劃線樣式
text-decoration:underline下劃線樣式
text-decoration:line-through刪除線樣式-貫穿線樣式
text-decoration:overline上劃線樣式
上劃線、刪除線、上劃線CSS樣式解析圖:
text-decoration語法結(jié)構(gòu)與值圖例教程
二、HTML常規(guī)下劃線標(biāo)簽-TOP
在HTMLu標(biāo)簽下劃線標(biāo)簽“U”即可對對象文字加html下劃線。
實(shí)例:
<u>我被U標(biāo)簽加下滑線</u>
三、CSS控制對象下劃線屬性樣式-TOP
下面我們進(jìn)行使用“U”標(biāo)簽和text-decoration進(jìn)行設(shè)置下劃線實(shí)例對比如下圖
htmlu下劃線與CSS下劃線對比應(yīng)用案例
四、CSS去掉html標(biāo)簽劃線樣式-TOP
如果我們想去掉對應(yīng)html中刪除線s標(biāo)簽刪除線樣式、去掉htmlu下劃線、去掉html上劃線樣式。
1、去掉htmls刪除線貫穿線樣式
.divcss5s{text-decoration:none}
去掉divcss5類對象盒子里htmls標(biāo)簽樣式屬性
2、去掉htmlu下劃線樣式
.divcss5u{text-decoration:none}
去掉divcss5類對象盒子里u標(biāo)簽下劃線線樣式屬性
五、超鏈接下劃線高級運(yùn)用-TOP
我們接下來為大家講解常見CSS超鏈接,當(dāng)隨便經(jīng)過時候文字對象被加下劃線。
代碼如下
<title>下劃線演示www.artdesignsale.com</title>
<style>
.yangshia{text-decoration:none;}
/*css注釋:鼠標(biāo)經(jīng)過熱點(diǎn)文字被加下劃線*/
.yangshia:hover{text-decoration:underline;}
/*鼠標(biāo)經(jīng)過熱點(diǎn)文字被加下劃線*/
</style>
</head>
<body>
<p>
<spanclass="yangshi">
<a href="http://www.artdesignsale.com">網(wǎng)頁設(shè)計(jì)</a>
</span>
</p>
</body>
</html>
請將以上代碼復(fù)制新建HTML即可查看該實(shí)例樣式。更詳細(xì)超鏈接講解請進(jìn)DIVCSS超鏈接。
六、完整下劃線刪除線上劃線案例-TOP
我們進(jìn)行對3個盒子對象分別設(shè)置對象內(nèi)文字下劃線、文字刪除線樣式、字體上劃線樣式。
1、css代碼片段:
.xh01{text-decoration:underline}
.xh02{text-decoration:line-through}
.xh03{text-decoration:overline}
2、html代碼片段:
<divclass="xh01">我被加下劃線</div>
<divclass="xh02">我被加貫穿刪除線</div>
<divclass="xh03">我被加上劃線</div>大家也可以把以上代碼復(fù)制下來,自己去新手應(yīng)用一下,這樣對知識的掌握會更加的牢固一些,好了先說到這里,如果大家有什么不明白或有好的意見歡迎大家一起溝通學(xué)習(xí)。