<penantic> Você nunca pode assumir como um navegador renderizará seu HTML. uma tag renderiza uma âncora que o navegador escolhe exibir como sublinhado por padrão. u é a única marca de sublinhado. as respostas abaixo são respostas CSS </pendantic>
Dead account
44
A ironia de que alguém é pedante o suficiente para fazer esse comentário, mas não o suficiente para soletrar a palavra corretamente (ou mesmo consistentemente!) Me surpreende.
Technetium
Além das respostas abaixo, o manuseio a:hovertambém deve ser considerado, os navegadores mais populares tendem a mostrar um sublinhado nas âncoras ao passar o mouse.
Fr0zenFyr
Respostas:
517
Use CSS. isso remove sublinhados de ae uelementos:
a, u {
text-decoration: none;}
Às vezes, você precisa substituir outros estilos por elementos; nesse caso, você pode usar o !important modificador em sua regra:
Se color: black !important;fosse adicionado body, isso também definirá todos os elementos, incluindo âncoras, âncoras visitadas e âncoras pairadas, sempre pretas?
Ωmega
Egamega Δ, aparentemente não, e graças a você apontar, encontrei um erro na regra geral do corpo. Eu atualizei minha resposta.
Emil Vikström
O que descobri é que, se você definir estilo text-decoration: none !important;para bodyelemento, ele funcionará para âncoras apenas quando você definir explicitamente estilo text-decoration: inherit;para aelementos.
Egamega
7
Geralmente, é melhor evitar !importante usar especificidade e cardinalidade para substituir estilos, caso contrário, você pode acabar com uma folha de estilo cheia !importantsem entender a estrutura que a torna necessária. É um código de cheiro IMO.
Mike Lyons
!importanté como ter uma bomba nuclear. Mas quando você começa a se seduzir e usa !importantoutros elementos, pode obtê-lo (nuke) e a vantagem é a favor de um impasse, o que é ótimo para o mundo, pois o MUD garante a paz, mas no mundo do css, essa paz significa que você não pode dar algo a vantagem.
Obviamente, misturar CSS com HTML (ou seja, CSS embutido) não é uma boa ideia, especialmente quando você usa atags em todo o lugar.
É por isso que é uma boa ideia adicionar isso a uma folha de estilo:
a {
text-decoration: none;}
Ou mesmo esse código em um arquivo JS:
var els = document.getElementsByTagName('a');for(var el =0; el < els.length; el++){
els[el].style["text-decoration"]="none";}
Para fornecer outra perspectiva para o problema (conforme inferido no título / conteúdo da postagem original):
Se você deseja rastrear o que está criando sublinhados não autorizados no seu HTML, use uma ferramenta de depuração. Há muito por onde escolher:
Para o Firefox existe o FireBug;
Para o Opera, há o Dragonfly (chamado "Developer tools" no menu Ferramentas-> Avançado; vem com o Opera por padrão);
Para o IE, existe a "Barra de Ferramentas do Desenvolvedor do Internet Explorer", que é um download separado para o IE7 e versões inferiores, e é integrada ao IE8 (pressione F12).
Não tenho idéia do Safari, Chrome e outros navegadores minoritários, mas você provavelmente deve ter pelo menos um dos três acima em sua máquina.
Quando você deseja usar uma marca de âncora simplesmente como um link sem o estilo adicionado (como o sublinhado ao passar o mouse ou a cor azul), adicione- class="no-style"a à marca de âncora. Em sua folha de estilo global, crie a classe "sem estilo".
.no-style {
text-decoration: none !important;
}
Isso tem duas vantagens.
Isso não afetará todas as tags âncora, apenas aquelas com a classe "sem estilo" adicionada a elas.
Ele substituirá qualquer outro estilo que possa impedir a configuração de decoração de texto como nenhuma.
a:hover
também deve ser considerado, os navegadores mais populares tendem a mostrar um sublinhado nas âncoras ao passar o mouse.Respostas:
Use CSS. isso remove sublinhados de
a
eu
elementos:Às vezes, você precisa substituir outros estilos por elementos; nesse caso, você pode usar o
!important
modificador em sua regra:fonte
color: black !important;
fosse adicionadobody
, isso também definirá todos os elementos, incluindo âncoras, âncoras visitadas e âncoras pairadas, sempre pretas?text-decoration: none !important;
parabody
elemento, ele funcionará para âncoras apenas quando você definir explicitamente estilotext-decoration: inherit;
paraa
elementos.!important
e usar especificidade e cardinalidade para substituir estilos, caso contrário, você pode acabar com uma folha de estilo cheia!important
sem entender a estrutura que a torna necessária. É um código de cheiro IMO.!important
é como ter uma bomba nuclear. Mas quando você começa a se seduzir e usa!important
outros elementos, pode obtê-lo (nuke) e a vantagem é a favor de um impasse, o que é ótimo para o mundo, pois o MUD garante a paz, mas no mundo do css, essa paz significa que você não pode dar algo a vantagem.O css é
e
fonte
Isso removerá sua cor e o sublinhado de que a marca de âncora existe com
fonte
A opção mais simples é esta:
Obviamente, misturar CSS com HTML (ou seja, CSS embutido) não é uma boa ideia, especialmente quando você usa
a
tags em todo o lugar.É por isso que é uma boa ideia adicionar isso a uma folha de estilo:
Ou mesmo esse código em um arquivo JS:
fonte
Use CSS para remover
text-decoration
s.fonte
Melhor opção para você, se você deseja remover apenas o sublinhado do link âncora -
Isso removerá o sublinhado.
Além disso, você pode usar sintaxe semelhante para manipular outros estilos também usando:
Espero que isto ajude!
PS- Esta é a minha primeira resposta de sempre!
fonte
no meu caso, havia uma regra sobre efeito de foco da âncora, assim:
Claro,
text-decoration:none;
não poderia ajudar nesta situação. E passo muito tempo até descobrir.Portanto: um sublinhado não deve ser confundido com uma borda inferior.
fonte
Em algum momento, ele será substituído por alguma renderização de CSS da interface do usuário. Melhor usar:
fonte
Para fornecer outra perspectiva para o problema (conforme inferido no título / conteúdo da postagem original):
Se você deseja rastrear o que está criando sublinhados não autorizados no seu HTML, use uma ferramenta de depuração. Há muito por onde escolher:
Para o Firefox existe o FireBug;
Para o Opera, há o Dragonfly (chamado "Developer tools" no menu Ferramentas-> Avançado; vem com o Opera por padrão);
Para o IE, existe a "Barra de Ferramentas do Desenvolvedor do Internet Explorer", que é um download separado para o IE7 e versões inferiores, e é integrada ao IE8 (pressione F12).
Não tenho idéia do Safari, Chrome e outros navegadores minoritários, mas você provavelmente deve ter pelo menos um dos três acima em sua máquina.
fonte
Quando você deseja usar uma marca de âncora simplesmente como um link sem o estilo adicionado (como o sublinhado ao passar o mouse ou a cor azul), adicione-
class="no-style"
a à marca de âncora. Em sua folha de estilo global, crie a classe "sem estilo"..no-style { text-decoration: none !important; }
Isso tem duas vantagens.
fonte
Não se esqueça de incluir folhas de estilo usando a tag link
http://www.w3schools.com/TAGS/tag_link.asp
Ou coloque CSS em uma tag de estilo em sua página da web.
Eu não recomendaria usar o sublinhado em nada além de links, sublinhado geralmente é aceito como algo clicável. Se não for clicável, não o sublinhe.
O básico sobre CSS pode ser adquirido em w3schools
fonte
é uma tag obsoleta.
Usar...
com um arquivo CSS contendo ...
ou apenas...
fonte
Use a propriedade css,
Para remover o sublinhado do link.
fonte
O sublinhado pode ser removido por uma propriedade CSS chamada decoração de texto.
Se você deseja remover o sublinhado do texto presente nos elementos que não sejam a , a seguinte sintaxe deve ser usada.
Existem muitos outros valores de decoração de texto que podem ajudá-lo a criar links.
fonte
Fui incomodado com esse problema na impressão na web e resolvi. Resultado verificado.
Funciona!.
fonte