Bagaimana cara menghapus garis bawah dari tautan dalam HTML?

130

Di halaman saya, saya telah meletakkan beberapa tautan di mana saya tidak ingin baris apa pun, jadi, bagaimana saya bisa menghapusnya menggunakan HTML?

html Paic Ten
sumber
4
Paic, saya tidak akan repot-repot mengembalikan tag lagi, tapi asal Anda tahu, satu-satunya cara untuk menghapus garis bawah adalah dengan CSS . Ya, meskipun Anda menambahkannya sejajar dengan HTML (dalam styleatribut), itu masih CSS . Dua tag lainnya juga sepenuhnya benar ( presentationdan hyperlink). Di masa mendatang, harap jangan hapus (atau tambahkan) tag ke pertanyaan kecuali ada alasan yang sah untuk melakukannya. Terima kasih!
0b10011
@ bfrohs Saya menghargai kata-kata Anda tetapi saya membangun situs saya hanya menggunakan HTML dan jadi saya tidak menambahkan tag lagi karena jika saya melakukannya, saya mungkin sudah mendapat jawaban untuk bahasa yang berbeda. Sebenarnya saya agak pemula untuk itu, itulah alasannya.
Paic Ten
3
Anda tidak dapat membangun situs web yang sesuai standar tanpa CSS (kecuali Anda menggunakan default browser untuk semua presentasi). HTML = struktur; CSS = presentasi. Tag lain tidak ada hubungannya dengan bahasa yang berbeda - mereka hanya disediakan untuk membantu orang menemukan pertanyaan dan jawaban.
0b10011
1
kemungkinan duplikat dari Cara menghapus garis bawah untuk jangkar (tautan)?
RAS
2
Mengapa pertanyaan ini memiliki begitu banyak suara? Anda benar-benar dapat menjawabnya dalam satu pencarian Google dan saya yakin ada banyak duplikat di StackOverflow.
Alternatex

Jawaban:

192

Versi sebaris :

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

Namun ingat bahwa Anda umumnya harus memisahkan konten situs web Anda (yang merupakan HTML ), dari presentasi (yang merupakan CSS ). Karena itu, Anda biasanya harus menghindari gaya inline .

Lihat jawaban John untuk melihat jawaban yang setara menggunakan CSS .

patryk.beza
sumber
1
pembunuh! Saya tidak pernah melihat garis-garis bawah ini selama bertahun-tahun di mana saya melakukan html .... ^^
Alex Cio
1
Jawaban John pada dasarnya masih menggunakan gaya inline. Memisahkan CSS Anda berarti lebih dari sekadar menggunakan CSS di html Anda. Misalnya class="big-and-red"aliasing bukan pemisahan. class="meaningful-domain-item"lalu css .meaningful-domain-item { //big and red }. Jawaban ini cukup untuk mengingatkan saya tag mana yang akan digunakan dalam css +1 saya.
Nathan Cooper
Kode yang disebutkan di atas tidak bekerja untuk saya. Ketika saya menggali masalah saya menyadari bahwa itu tidak berhasil karena saya menempatkan gaya setelah href. Ketika saya menempatkan gaya sebelum href itu berfungsi seperti yang diharapkan. <a href=" yoursite.com "style="text-decoration:none"> situs Anda </a>
Ganesh MS
55

Ini akan menghapus semua garis bawah dari semua tautan:

a {text-decoration: none; }

Jika Anda memiliki tautan khusus yang ingin Anda terapkan ini, beri mereka nama kelas, sukai nounderlinedan lakukan ini:

a.nounderline {text-decoration: none; }

Itu hanya akan berlaku untuk tautan tersebut dan membuat semua yang lain tidak terpengaruh.

Kode ini termasuk dalam <head>dokumen Anda atau dalam stylesheet:

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

Dan di dalam tubuh:

<a href="#" class="nounderline">Link</a>
John Conde
sumber
15

Saya sarankan untuk menggunakan: arahkan kursor untuk menghindari garis bawah jika penunjuk mouse melewati jangkar

a:hover {
   text-decoration:none;
}
Roma
sumber
6

  1. Tambahkan ini ke style sheet eksternal Anda ( lebih disukai ):

    a {text-decoration:none;}

  2. Atau tambahkan ini ke <head>dokumen HTML Anda:

    <style type="text/css">
 a {text-decoration:none;}
</style>

  3. Atau tambahkan ke aelemen itu sendiri ( tidak disarankan ):

    <!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>
0b10011
sumber
4

Jawaban lainnya semuanya menyebutkan dekorasi teks. Terkadang Anda menggunakan tema Wordpress atau CSS orang lain di mana tautannya digarisbawahi dengan metode lain, sehingga hiasan teks: tidak ada yang tidak akan mematikan garis bawah.

Perbatasan dan bayangan kotak adalah dua metode lain yang saya ketahui untuk menggarisbawahi tautan. Untuk mematikannya:

border: none;

dan

box-shadow: none;
Joe Golton
sumber
2

Berikut ini bukan praktik terbaik, tetapi terkadang terbukti bermanfaat

Lebih baik menggunakan solusi yang disediakan oleh John Conde, tetapi kadang-kadang, menggunakan CSS eksternal tidak mungkin. Jadi, Anda dapat menambahkan yang berikut ke tag HTML Anda:

<a style="text-decoration:none;">My Link</a>
nebulousGirl
sumber
1 
<style="text-decoration: none">

Kode di atas sudah cukup. Cukup tempel ini ke tautan yang ingin Anda hapus garis bawahnya.

sd1990
sumber
1

Semua kode yang disebutkan di atas tidak bekerja untuk saya. Ketika saya menggali masalah saya menyadari bahwa itu tidak berhasil karena saya menempatkan gaya setelah href. Ketika saya menempatkan gaya sebelum href itu berfungsi seperti yang diharapkan.

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
Ganesh MS
sumber