寫html超鏈接的時候,超鏈接總是自帶下劃線,如果不需要下劃線,我們需要將其去掉,下面我們就來說一下怎么去掉下劃線。
我們在使用超鏈接的時候,下劃線總是伴隨著出現(xiàn),從視覺上來說有著下劃線的a
標簽總是感覺很奇怪,而且在某些需求中,也不需要下劃線的出現(xiàn),所以就會問了,有沒有什么方法讓下劃線不出現(xiàn)呢?答案是:有的。
我們首先來看一下有下劃線的a
標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>如何去掉html a標簽下劃線</title> </head> <body> <div> <a href="">這是沒有去掉下劃線的a標簽</a> </div> </body> </html>
這是沒有去掉下劃線的,是大家最熟悉的a
標簽。接下來讓我們看看去掉下劃線的a
標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>如何去掉html a標簽下劃線</title> <style> a{ text-decoration:none; } </style> </head> <body> <div> <a href="">這是去掉下劃線的a標簽</a> </div> </body> </html>
從圖上可以看出,加上一行text-decoration:none;
代碼之后,超鏈接就沒有下劃線了。
因為text-decoration
規(guī)定給文本添加上劃線,下劃線或者刪除線,當(dāng)屬性值為none
時,表示文本沒有裝飾,所以加上這行代碼之后,a標簽就沒有文本裝飾了。
是不是特別的簡單,如果想給指定超鏈接去掉下劃線,只需要在a標簽里使用行內(nèi)樣式就可以了。
推薦學(xué)習(xí):CSS3視頻教程