首頁  >  文章  >  web前端  >  如何使用css去掉a標籤的底線? (代碼詳解)

如何使用css去掉a標籤的底線? (代碼詳解)

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-01 15:48:578420瀏覽

寫html超連結的時候,超連結總是自備下劃線,如果不需要下劃線,我們需要將其去掉,下面我們就來說一下怎麼去掉下劃線。

如何使用css去掉a標籤的底線? (代碼詳解)

我們在使用超連結的時候,底線總是伴隨著出現,從視覺上來說有著下劃線的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>
</head>
<body>
    <div>
        <a href="">这是没有去掉下划线的a标签</a>
    </div>
</body>
</html>

如何使用css去掉a標籤的底線? (代碼詳解)

這是沒有去掉底線的,是大家最熟悉的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>

如何使用css去掉a標籤的底線? (代碼詳解)

從圖上可以看出,加上一行text-decoration:none;程式碼之後,超連結就沒有底線了。

因為text-decoration規定為文字加上上劃線,底線或刪除線,當屬性值為none時,表示文字沒有裝飾,所以加上這行程式碼之後,a標籤就沒有文字裝飾了。

是不是特別的簡單,如果想給指定超連結去掉下劃線,只需要在a標籤裡使用行內樣式就可以了。

推薦學習:CSS3影片教學

#

以上是如何使用css去掉a標籤的底線? (代碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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