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?

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

1

possível duplicata de Como remover o sublinhado de âncoras (links)?

— RAS

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

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

Adicione isso à sua folha de estilos externa ( preferencial ):
```
a {text-decoration:none;}
```

Ou adicione isso ao <head>seu documento HTML:

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

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