Como remover o sublinhado de um link em HTML?

129

Na minha página, coloquei alguns links nos quais não quero nenhuma linha; portanto, como removê-lo usando HTML?

Paic Ten
fonte
4
Paic, não vou me incomodar em reverter as tags novamente, mas só para você saber, a única maneira de remover o sublinhado é com CSS . Sim, mesmo que você o adicione inline com o HTML (no styleatributo), ele ainda é CSS . As outras duas tags também são completamente válidas ( presentatione hyperlink). No futuro, não remova (ou adicione) tags a uma pergunta, a menos que haja um motivo válido para isso. Obrigado!
0103101
@bfrohs Respeito suas palavras, mas estou construindo meu site usando apenas HTML e, portanto, não adicionei mais tags porque, se o fizesse, poderia ter respostas para idiomas diferentes. Na verdade, sou um pouco novato, é esse o motivo.
precisa
3
Você não pode criar um site compatível com os padrões sem CSS (a menos que siga os padrões do navegador para todas as apresentações). HTML = estrutura; CSS = apresentação. As outras tags não tinham nada a ver com um idioma diferente - elas foram fornecidas apenas para ajudar as pessoas a encontrar a pergunta e a resposta.
0103101
2
Por que essa pergunta tem tantos votos positivos? Você pode literalmente respondê-lo em uma única pesquisa no Google e tenho certeza de que há muitas duplicatas no StackOverflow.
Alternatex

Respostas:

191

Versão em linha :

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

No entanto, lembre-se de que você geralmente deve separar o conteúdo do seu site (que é HTML ), da apresentação (que é CSS ). Portanto, você geralmente deve evitar estilos embutidos .

Veja a resposta de John para obter uma resposta equivalente usando CSS .

patryk.beza
fonte
1
assassino! Eu nunca vi essas linhas de sublinhado em todos os anos que eu onde fazer html .... ^^
Alex Cio
1
A resposta de John ainda usa estilos essencialmente em linha. Separar o CSS significa mais do que aliasing css no seu html. Por exemplo, class="big-and-red"aliasing não é separação. class="meaningful-domain-item"então css .meaningful-domain-item { //big and red }é. Esta resposta é suficiente para me lembrar qual tag usar no meu CSS +1.
Nathan Cooper
Este código mencionado acima não funcionou para mim. Quando entro no problema, percebo que ele não estava funcionando porque havia colocado o estilo após o href. Quando eu coloquei o estilo antes do href, ele estava funcionando como esperado. <a href=" yoursite.com "style="text-decoration:none"> yoursite </a>
Ganesh MS
55

Isso removerá todos os sublinhados de todos os links:

a {text-decoration: none; }

Se você possui links específicos aos quais deseja aplicar isso, atribua a eles um nome de classe, como nounderlinee faça o seguinte:

a.nounderline {text-decoration: none; }

Isso se aplicará apenas a esses links e deixará todos os outros não afetados.

Este código pertence ao <head>documento ou a uma folha de estilo:

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

E no corpo:

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

Sugiro usar: passe o mouse para evitar sublinhado se o ponteiro do mouse estiver sobre uma âncora

a:hover {
   text-decoration:none;
}
romano
fonte
6
  1. Adicione isso à sua folha de estilos externa ( preferencial ):

    a {text-decoration:none;}
  2. Ou adicione isso ao <head>seu documento HTML:

    <style type="text/css">
     a {text-decoration:none;}
    </style>
  3. Ou adicione-o ao apróprio elemento ( não recomendado ):

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

As demais respostas mencionam a decoração do texto. Às vezes, você usa um tema do Wordpress ou o CSS de outra pessoa, onde os links são sublinhados por outros métodos, para que a decoração do texto: nenhum apague o sublinhado.

Border e box-shadow são outros dois métodos que eu conheço para sublinhar links. Para desativá-los:

border: none;

e

box-shadow: none;
Joe Golton
fonte
2

O seguinte não é uma prática recomendada, mas às vezes pode ser útil

É melhor usar a solução fornecida por John Conde, mas às vezes é impossível usar CSS externo. Portanto, você pode adicionar o seguinte à sua tag HTML:

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

O código acima será suficiente. Apenas cole-o no link do qual deseja remover o sublinhado.

sd1990
fonte
1

Todo o código mencionado acima não funcionou para mim. Quando entro no problema, percebo que ele não estava funcionando porque havia colocado o estilo após o href. Quando coloquei o estilo antes do href, ele estava funcionando como esperado.

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