Jak usunąć podkreślenie z linku w HTML?

134

Na mojej stronie umieściłem linki, pod którymi nie chcę żadnej linii, więc jak mogę to usunąć za pomocą HTML?

html

— Paic Ten
źródło

5

Paic, nie zamierzam ponownie zawracać sobie głowy wycofywaniem tagów, ale żebyś wiedział, jedynym sposobem na usunięcie podkreślenia jest użycie CSS . Tak, mimo że dodajesz go w tekście HTML (w styleatrybucie), nadal jest to CSS . Pozostałe dwa tagi są również całkowicie prawidłowe ( presentationi hyperlink). W przyszłości nie usuwaj (ani nie dodawaj) tagów do pytania, chyba że istnieje ku temu ważny powód. Dzięki!

— 0b10011

1

@bfrohs Szanuję Twoje słowa, ale buduję swoją witrynę tylko w HTML-u, więc nie dodałem więcej tagów, ponieważ gdybym to zrobił, mógłbym uzyskać odpowiedzi w innym języku. Właściwie jestem trochę nowicjuszem, to jest powód.

— Paic Dziesięć

4

Nie możesz zbudować witryny internetowej zgodnej ze standardami bez CSS (chyba że wybierzesz domyślne ustawienia przeglądarki dla wszystkich prezentacji). HTML = struktura; CSS = prezentacja. Pozostałe tagi nie miały nic wspólnego z innym językiem - zostały dostarczone tylko po to, aby pomóc ludziom znaleźć pytanie i odpowiedź.

— 0b10011

2

możliwy duplikat Jak usunąć podkreślenie dla kotwic (linków)?

— RAS

3

Dlaczego to pytanie ma tak wiele głosów pozytywnych? Możesz odpowiedzieć dosłownie w jednym wyszukiwaniu Google i jestem pewien, że w StackOverflow jest wiele jego duplikatów.

— Alternatex

196

Wersja wbudowana :

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

Pamiętaj jednak, że generalnie powinieneś oddzielić zawartość swojej strony (czyli HTML ) od prezentacji (czyli CSS ). Dlatego generalnie należy unikać stylów wbudowanych .

Zobacz odpowiedź Johna, aby zobaczyć równoważną odpowiedź za pomocą CSS .

— patryk.beza
źródło

2

zabójca! Nigdy nie widziałem tych podkreślonych linii przez te wszystkie lata, w których robiłem html ... ^^

— Alex Cio.

2

Odpowiedź Johna nadal wykorzystuje zasadniczo style wbudowane. Oddzielenie CSS to coś więcej niż aliasowanie css w twoim html. Np. class="big-and-red"To aliasing, a nie separacja. class="meaningful-domain-item"to css .meaningful-domain-item { //big and red }. Ta odpowiedź wystarczy, aby przypomnieć mi, którego tagu użyć w moim css +1.

— Nathan Cooper,

1

Ten wyżej wymieniony kod nie działa dla mnie. Kiedy zagłębiam się w problem, zdaję sobie sprawę, że nie działa, ponieważ umieściłem styl po href. Kiedy umieściłem styl przed href, działał zgodnie z oczekiwaniami. <a href=" yoursite.com "style="text-decoration:none"> twoja_witryna </a>

— Ganesh MS

57

Spowoduje to usunięcie wszystkich podkreśleń ze wszystkich linków:

a {text-decoration: none; }

Jeśli masz określone linki, do których chcesz to zastosować, nadaj im nazwę klasy, na przykład nounderlinei zrób to:

a.nounderline {text-decoration: none; }

Będzie to miało zastosowanie tylko do tych linków i pozostawi wszystkie inne niezmienione.

Ten kod należy do <head>części twojego dokumentu lub arkusza stylów:

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

A w ciele:

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

— John Conde
źródło

15

Proponuję użyć: hover, aby uniknąć podkreślenia, jeśli wskaźnik myszy znajduje się nad kotwicą

a:hover {
   text-decoration:none;
}

— rzymski
źródło

6

Dodaj to do swojego zewnętrznego arkusza stylów ( preferowane ):
```
a {text-decoration:none;}
```

Lub dodaj to do <head>swojego dokumentu HTML:

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

Lub dodaj go do samego aelementu ( niezalecane ):

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

— 0b10011
źródło

5

Wszystkie inne odpowiedzi wspominają o dekorowaniu tekstu. Czasami używasz motywu Wordpress lub czyjegoś CSS, w którym linki są podkreślane innymi metodami, więc text-decoration: none nie wyłącza podkreślenia.

Border i box-shadow to dwie inne znane mi metody podkreślania linków. Aby je wyłączyć:

border: none;

i

box-shadow: none;

— Joe Golton
źródło

2

Poniższe informacje nie są najlepszymi praktykami, ale czasami mogą się okazać przydatne

Lepiej jest skorzystać z rozwiązania dostarczonego przez Johna Conde, ale czasami użycie zewnętrznego CSS jest niemożliwe. Możesz więc dodać do swojego tagu HTML:

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

— nebulousGirl
źródło

1

<style="text-decoration: none">

Powyższy kod wystarczy, po prostu wklej go w link, z którego chcesz usunąć podkreślenie.

— sd1990
źródło

1

Cały wyżej wymieniony kod nie działa u mnie. Kiedy zagłębiam się w problem, zdaję sobie sprawę, że to nie działa, ponieważ umieściłem styl po href. Kiedy umieściłem styl przed href, działał zgodnie z oczekiwaniami.

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

— Ganesh MS
źródło