HTML'deki bir bağlantıdan altı çizili nasıl kaldırılır?


130

Sayfama, altında satır olmasını istemediğim bazı bağlantılar koydum, bu yüzden bunu HTML kullanarak nasıl kaldırabilirim?


4
Paic, etiketleri bir daha geri alma zahmetine girmeyeceğim, ama bilin ki, alt çizgiyi kaldırmanın tek yolu CSS kullanmaktır . Evet, HTML ile satır içi ekliyor olsanız bile ( styleöznitelikte), yine de CSS'dir . Diğer iki etiket de tamamen geçerlidir ( presentationve hyperlink). İleride, bunun için geçerli bir neden olmadıkça lütfen bir soruya etiketleri kaldırmayın (veya eklemeyin). Teşekkürler!
— 0b10011

@bfrohs Sözlerinize saygı duyuyorum ama sitemi sadece HTML kullanarak oluşturuyorum ve bu yüzden daha fazla etiket eklemedim çünkü eğer yapsaydım, farklı diller için cevaplar alabilirdim. Aslında biraz acemiyim, nedeni bu.
— Paic Ten

3
CSS olmadan standartlara uygun bir web sitesi oluşturamazsınız (tüm sunum için tarayıcı varsayılanlarını kullanmadığınız sürece). HTML = yapı; CSS = sunum. Diğer etiketlerin farklı bir dille hiçbir ilgisi yoktu - yalnızca insanların soruyu ve cevabı bulmalarına yardımcı olmak için sağlandılar.
— 0b10011


2
Bu sorunun neden bu kadar çok olumlu oyu var? Kelimenin tam anlamıyla tek bir Google aramasında cevap verebilirsiniz ve eminim StackOverflow'da bunun birçok kopyası vardır.
— Alternatex

Yanıtlar:


192

Satır içi sürüm:

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

Ancak , genellikle web sitenizin içeriğini ( HTML olan ) sunumdan ( CSS olan ) ayırmanız gerektiğini unutmayın . Bu nedenle, genellikle satır içi stillerden kaçınmalısınız .

Bkz John'un cevabını kullanarak eşdeğer cevabı görmek için CSS .


1
katil! Bu alt çizgi çizgilerini html yaptığım yıllar boyunca hiç görmedim .... ^^
— Alex Cio

1
John'un cevabı hala esasen satır içi stilleri kullanıyor. CSS'nizi ayırmak, html'nizde css'i takma addan daha fazlası anlamına gelir. Örn class="big-and-red", ayırma değil takma addır. class="meaningful-domain-item"o zaman css .meaningful-domain-item { //big and red }olur. Bu cevap, css + 1'imde hangi etiketi kullanacağımı hatırlatmak için yeterli.
— Nathan Cooper

Yukarıda belirtilen bu kod benim için çalışmadı. Problemi araştırdığımda işe yaramadığını anlıyorum çünkü stili href sonrasına yerleştirmiştim. Stili href'in önüne yerleştirdiğimde beklendiği gibi çalışıyordu. <a href=" siteniz.com "style="text-decoration:none"> siteniz </a>
— Ganesh MS

55

Bu, tüm bağlantılardan tüm alt çizgileri kaldıracaktır:

a {text-decoration: none; }

Bunu uygulamak istediğiniz belirli bağlantılarınız varsa, onlara bir sınıf adı verin nounderlineve bunu yapın:

a.nounderline {text-decoration: none; }

Bu, yalnızca bu bağlantılar için geçerli olacak ve diğerlerini etkilenmeden bırakacaktır.

Bu kod <head>, belgenizin veya bir stil sayfasına ait:

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

Ve vücutta:

<a href="#" class="nounderline">Link</a>

15

Kullanmanızı öneririm: fare işaretçisi bir tutturucunun üzerindeyse altı çizili olmasını önlemek için üzerine gelin

a:hover {
   text-decoration:none;
}

6
  1. Bunu harici stil sayfanıza ekleyin ( tercih edilir ):

    a {text-decoration:none;}
  2. Veya bunu <head>HTML belgenize ekleyin :

    <style type="text/css">
     a {text-decoration:none;}
    </style>
  3. Veya aöğenin kendisine ekleyin ( önerilmez ):

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

4

Diğer cevapların tümü metin dekorasyonundan bahsediyor. Bazen bir Wordpress teması veya bağlantıların diğer yöntemlerle altı çizildiği bir başkasının CSS'sini kullanırsınız, böylece metin dekorasyonu: hiçbiri alt çizgiyi kapatmaz.

Sınır ve kutu gölgesi, bağlantıların altını çizmek için bildiğim diğer iki yöntemdir. Bunları kapatmak için:

border: none;

ve

box-shadow: none;

2

Aşağıdakiler en iyi uygulama değildir, ancak bazen yararlı olabilir

John Conde tarafından sağlanan çözümü kullanmak daha iyidir, ancak bazen harici CSS kullanmak imkansızdır. Böylece, HTML etiketinize aşağıdakileri ekleyebilirsiniz:

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

1
<style="text-decoration: none">

Yukarıdaki kod yeterli olacaktır, alt çizgiyi kaldırmak istediğiniz bağlantıya yapıştırmanız yeterlidir.


1

Yukarıda belirtilen kodların tümü benim için işe yaramadı. Problemi araştırdığımda işe yaramadığını anlıyorum çünkü stili href sonrasına yerleştirmiştim. Stili href'in önüne yerleştirdiğimde beklendiği gibi çalışıyordu.

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.