<penantic> Anda tidak pernah bisa berasumsi bagaimana browser akan merender HTML Anda. tag membuat jangkar yang dipilih peramban untuk ditampilkan sebagai garis bawah secara default. kamu adalah satu-satunya tanda garis bawah. jawaban di bawah adalah jawaban CSS </pendantic>
Akun mati
44
Ironi bahwa seseorang cukup bertele-tele untuk membuat komentar ini, tetapi tidak cukup bertele-tele untuk mengeja kata dengan benar (atau bahkan secara konsisten!) Membuat saya terpesona.
Technetium
Selain jawaban di bawah ini, penanganan a:hoverjuga harus dipertimbangkan, sebagian besar browser populer cenderung menunjukkan garis bawah pada jangkar pada saat melayang.
Fr0zenFyr
Jawaban:
517
Gunakan CSS. ini menghilangkan garis bawah dari adan uelemen:
a, u {
text-decoration: none;}
Terkadang Anda perlu mengganti gaya lain untuk elemen, dalam hal ini Anda dapat menggunakan !importantpengubah pada aturan Anda:
Jika color: black !important;akan ditambahkan body, apakah itu juga akan mengatur semua elemen, termasuk jangkar, jangkar yang dikunjungi, jangkar melayang agar selalu hitam?
Ωmega
Ωmega Δ, tampaknya tidak, dan terima kasih untuk menunjukkannya, saya menemukan kesalahan dalam aturan tubuh secara keseluruhan. Saya telah memperbarui jawaban saya.
Emil Vikström
Apa yang saya temukan adalah bahwa jika Anda menetapkan gaya text-decoration: none !important;untuk bodyelemen, maka itu berfungsi untuk jangkar hanya ketika Anda secara eksplisit mengatur gaya text-decoration: inherit;untuk aelemen.
Ωmega
7
Biasanya lebih baik untuk menghindari !importantdan menggunakan spesifisitas dan kardinalitas untuk mengesampingkan gaya, jika tidak, Anda dapat berakhir dengan lembar gaya yang penuh !importanttanpa pemahaman tentang struktur yang membuatnya perlu. Ini adalah bau kode IMO.
Mike Lyons
!importantseperti memiliki nuklir. Tapi begitu Anda mulai turun dan tergoda untuk menggunakan !importantunsur-unsur lain mungkin mendapatkannya (nuklir) dan keuntungan hilang dalam kebuntuan, yang bagus untuk dunia, karena MUD memastikan perdamaian, tetapi di dunia css, kedamaian seperti itu berarti Anda tidak dapat memberikan sesuatu keuntungan.
Tentu saja, mencampur CSS dengan HTML (yaitu CSS sebaris) bukan ide yang baik, terutama ketika Anda menggunakan atag di semua tempat.
Karena itu, sebaiknya tambahkan ini ke stylesheet:
a {
text-decoration: none;}
Atau bahkan kode ini dalam file JS:
var els = document.getElementsByTagName('a');for(var el =0; el < els.length; el++){
els[el].style["text-decoration"]="none";}
Untuk memberikan perspektif lain terhadap masalah tersebut (seperti yang disimpulkan dari judul / isi posting asli):
Jika Anda ingin melacak apa yang membuat garis bawah nakal di HTML Anda, gunakan alat debugging. Ada banyak pilihan:
Untuk Firefox ada FireBug;
Untuk Opera ada Dragonfly (disebut "Alat pengembang" di menu Tools-> Advanced; dilengkapi dengan Opera secara default);
Untuk IE ada "Internet Explorer Developer Toolbar", yang merupakan unduhan terpisah untuk IE7 dan di bawahnya, dan terintegrasi dalam IE8 (tekan F12).
Saya tidak tahu tentang Safari, Chrome, dan peramban minoritas lainnya, tetapi Anda mungkin harus memiliki setidaknya satu dari tiga di atas pada mesin Anda.
Saat Anda ingin menggunakan tag jangkar hanya sebagai tautan tanpa gaya tambahan (seperti garis bawah di hover atau warna biru) tambahkan class="no-style"ke tag jangkar. Kemudian di stylesheet global Anda, buat kelas "no-style".
.no-style {
text-decoration: none !important;
}
Ini memiliki dua keunggulan.
Itu tidak akan memengaruhi semua tag anchor, hanya yang dengan kelas "tanpa gaya" yang ditambahkan padanya.
Ini akan mengesampingkan gaya lain yang mungkin mencegah pengaturan dekorasi teks menjadi tidak ada.
Atau lampirkan CSS di dalam tag gaya di halaman web Anda.
<style>
a {text-decoration:none;}
p {text-decoration:underline;}</style>
Saya tidak akan merekomendasikan menggunakan garis bawah pada apa pun selain tautan, garis bawah umumnya diterima sebagai sesuatu yang dapat diklik. Jika tidak dapat diklik, jangan digarisbawahi.
a:hover
juga harus dipertimbangkan, sebagian besar browser populer cenderung menunjukkan garis bawah pada jangkar pada saat melayang.Jawaban:
Gunakan CSS. ini menghilangkan garis bawah dari
a
danu
elemen:Terkadang Anda perlu mengganti gaya lain untuk elemen, dalam hal ini Anda dapat menggunakan
!important
pengubah pada aturan Anda:sumber
color: black !important;
akan ditambahkanbody
, apakah itu juga akan mengatur semua elemen, termasuk jangkar, jangkar yang dikunjungi, jangkar melayang agar selalu hitam?text-decoration: none !important;
untukbody
elemen, maka itu berfungsi untuk jangkar hanya ketika Anda secara eksplisit mengatur gayatext-decoration: inherit;
untuka
elemen.!important
dan menggunakan spesifisitas dan kardinalitas untuk mengesampingkan gaya, jika tidak, Anda dapat berakhir dengan lembar gaya yang penuh!important
tanpa pemahaman tentang struktur yang membuatnya perlu. Ini adalah bau kode IMO.!important
seperti memiliki nuklir. Tapi begitu Anda mulai turun dan tergoda untuk menggunakan!important
unsur-unsur lain mungkin mendapatkannya (nuklir) dan keuntungan hilang dalam kebuntuan, yang bagus untuk dunia, karena MUD memastikan perdamaian, tetapi di dunia css, kedamaian seperti itu berarti Anda tidak dapat memberikan sesuatu keuntungan.Css adalah
dan
sumber
Ini akan menghapus warna Anda serta garis bawah yang ada pada anchor tag
sumber
Opsi paling sederhana adalah ini:
Tentu saja, mencampur CSS dengan HTML (yaitu CSS sebaris) bukan ide yang baik, terutama ketika Anda menggunakan
a
tag di semua tempat.Karena itu, sebaiknya tambahkan ini ke stylesheet:
Atau bahkan kode ini dalam file JS:
sumber
Gunakan CSS untuk menghapus
text-decoration
s.sumber
Opsi terbaik untuk Anda jika Anda hanya ingin menghapus garis bawah dari anchor link saja-
Ini akan menghapus garis bawah.
Selanjutnya Anda dapat menggunakan sintaks yang sama untuk memanipulasi gaya lain juga menggunakan-
Semoga ini membantu!
PS- Ini adalah jawaban pertama saya!
sumber
dalam kasus saya ada aturan tentang efek hover oleh jangkar, seperti ini:
Tentu saja,
text-decoration:none;
tidak bisa membantu dalam situasi ini. Dan saya menghabiskan banyak waktu sampai saya menemukannya.Jadi: Garis bawah jangan dikacaukan dengan batas-bawah.
sumber
Kadang akan ditimpa oleh beberapa rendering UI UI. Lebih baik digunakan:
sumber
Untuk memberikan perspektif lain terhadap masalah tersebut (seperti yang disimpulkan dari judul / isi posting asli):
Jika Anda ingin melacak apa yang membuat garis bawah nakal di HTML Anda, gunakan alat debugging. Ada banyak pilihan:
Untuk Firefox ada FireBug;
Untuk Opera ada Dragonfly (disebut "Alat pengembang" di menu Tools-> Advanced; dilengkapi dengan Opera secara default);
Untuk IE ada "Internet Explorer Developer Toolbar", yang merupakan unduhan terpisah untuk IE7 dan di bawahnya, dan terintegrasi dalam IE8 (tekan F12).
Saya tidak tahu tentang Safari, Chrome, dan peramban minoritas lainnya, tetapi Anda mungkin harus memiliki setidaknya satu dari tiga di atas pada mesin Anda.
sumber
Saat Anda ingin menggunakan tag jangkar hanya sebagai tautan tanpa gaya tambahan (seperti garis bawah di hover atau warna biru) tambahkan
class="no-style"
ke tag jangkar. Kemudian di stylesheet global Anda, buat kelas "no-style"..no-style { text-decoration: none !important; }
Ini memiliki dua keunggulan.
sumber
Jangan lupa untuk menyertakan stylesheet menggunakan tag tautan
http://www.w3schools.com/TAGS/tag_link.asp
Atau lampirkan CSS di dalam tag gaya di halaman web Anda.
Saya tidak akan merekomendasikan menggunakan garis bawah pada apa pun selain tautan, garis bawah umumnya diterima sebagai sesuatu yang dapat diklik. Jika tidak dapat diklik, jangan digarisbawahi.
Dasar-dasar CSS dapat diambil di w3schools
sumber
adalah tag yang usang.
Menggunakan...
dengan file CSS yang mengandung ...
atau hanya...
sumber
Gunakan properti css,
Untuk menghapus garis bawah dari tautan.
sumber
Garis bawah dapat dihapus oleh properti CSS yang disebut dekorasi teks.
Jika Anda ingin menghapus garis bawah untuk teks yang ada dalam elemen selain a , sintaks berikut harus digunakan.
Ada banyak nilai dekorasi teks lainnya yang dapat membantu Anda mendesain tautan.
sumber
Saya bermasalah dengan masalah ini dalam pencetakan web dan dipecahkan. Hasil yang diverifikasi.
Berhasil!.
sumber