CSS remove o sublinhado do link
Exemplo 01:
Vamos dar uma olhada no primeiro exemplo de html para adicionar o link na página da web html. Então, estaremos discutindo uma maneira de remover o sublinhado deste link. Geramos um novo arquivo de texto com o título "CSS". Este arquivo foi aberto no código do Visual Studio. Temos iniciado nosso código com o uso da tag html principal, "html". Dentro da tag "Head" deste script HTML, usamos a tag "Título" para nomear ou tocar nossa página da web, "Remover sublinhado".
Dentro da etiqueta corporal, estamos adicionando nosso conteúdo a ser exibido na página da web com a ajuda de algumas tags html úteis. A primeira etiqueta que estamos usando é a etiqueta do tamanho 2, “H2”. O H2 é o segundo maior título em script html. Este cabeçalho será exibido na página da web sem nenhum estilo e em outro formato. A próxima etiqueta que estamos usando é a tag de parágrafo, “P”. Ele contém um texto simples, juntamente com o link que está anexado a ele com a tag "A" âncora seguida pelo "href" para adicionar o URL. Este link pode ser um caminho para alguma imagem no seu computador local ou em alguma página on -line. Fornecemos o caminho para uma imagem em nosso computador local (eu.e., índice.png.) O que você forneceu na tag "A" da âncora será sublinhado e destacado em uma página da web. Trata -se do uso de links em uma página HTML. Vamos salvar e executar este código usando o botão Executar na barra de tarefas do Código do Visual Studio. Execute este código com o navegador Chrome.
A página da web chamada "Remover Subline" foi aberta no navegador, como você pode ver na saída abaixo. Há um "link para sublinhado" em sua tela branca. Depois disso, você tem um parágrafo simples de uma linha abaixo dele com um link anexado à sua palavra "logotipo". Você pode ver que a palavra "logotipo" está sublinhada e destacada na cor azul. Toque na palavra "logotipo" para ver o que sai.
A página da web foi direcionada para a imagem mostrada do sol-abuso (índice.JPG) Localização que foi localizada em nosso computador local. A imagem contém um logotipo animado simples.
Vamos atualizar nosso código HTML para remover a linha usada para sublinhar a palavra -chave link "logotipo". Para isso, atualizamos o cabeçalho H2 primeiro (eu.e., "Link sem sublinhado"). Depois disso, usamos a tag "estilo" CSS dentro da tag âncora "A" para definir a propriedade "Decoração de texto" como "Nenhum". A propriedade "Decoração de texto" definida como "Nenhum" removerá todo o estilo aplicado à palavra-chave de link específica "logotipo" e a tornará um texto normal simples. Vamos salvar este código primeiro.
Depois de executar o código atualizado no navegador, temos a linha de parágrafo e a direção atualizada. A palavra "logotipo" foi destacada como é, mas o sublinhado foi removido dela. Por outro lado, a palavra -chave "logotipo" ainda funciona como um link e o direciona para a imagem.
Exemplo 2:
Vamos dar uma olhada no novo exemplo para remover o sublinhado dos links fornecidos na página da web html. Este exemplo será diferente porque usamos dois links de diferentes tipos na tag de parágrafo interno de uma tag corporal para um script html. Adicionamos dois títulos e dois parágrafos no corpo de uma página da web através de tags. O primeiro e o segundo títulos: “Link com sublinhado”, mostram que os dois links serão sublinhados. Dentro das tags de parágrafo, usamos a tag âncora "A" para adicionar links para URLs específicos. O primeiro URL do parágrafo está apontando para o mesmo índice de imagem.png. Uma etiqueta de estilo CSS foi usada para definir a cor desta palavra -chave Link "logotipo" como roxo conforme a propriedade Color. O segundo URL do parágrafo está apontando para o novo URL para um arquivo de texto simples localizado em nosso computador local (i.e., teste.txt) e a tag de estilo CSS foi usada para definir a cor de sua palavra -chave link “arquivo” para marrom conforme a propriedade colorida.
Vamos estilizá -los com a ajuda de uma etiqueta de estilo na etiqueta da cabeça de um arquivo html. Estamos definindo as margens de 15 pixels para títulos e parágrafos enquanto definimos as propriedades do link e o mouse também. A propriedade de decoração de texto está usando o valor "sublinhado" para sublinhar as duas palavras-chave. A espessura da linha foi definida para 6 pixels. A cor do hover da propriedade foi definida como "aqua". Vamos salvar e depurar este código no Visual Studio agora.
A saída para o código acima está mostrando dois títulos com dois parágrafos. A palavra -chave sublinhada "logotipo" contém o caminho para a imagem enquanto a palavra sublinhada "arquivo" estará direcionando você para o arquivo de texto (i.e., teste.TXT.)
Quando você toca na palavra -chave "arquivo", ele o direcionará para o teste.arquivo txt como mostrado abaixo.
Quando você passa o mouse sobre qualquer uma das palavras destacadas dos parágrafos mostrados por baixo, a cor de uma palavra e seu sublinhado seriam alterados para "aqua", como mostrado na tela abaixo.
Para remover o sublinhado das duas palavras do link, precisamos definir a decoração de texto da propriedade para um link para "nenhum". Não atualizamos o restante do código para evitar nenhum inconveniente. Para ver seu funcionamento, precisamos salvá -lo primeiro por Ctrl+S e depois depurar -o usando o botão "Executar" do código do Visual Studio.
A saída para este código atualizado mostrou dois parágrafos, cada um com a palavra Link "logotipo" e "arquivo", respectivamente. O sublinhado no fundo de ambas as palavras foi removido com sucesso sem causar nenhum problema.
Conclusão:
A demonstração de remover um sublinhamento do link foi feita neste artigo. Para isso, utilizamos a propriedade de decoração de texto no estilo em linha e no estilo de um script HTML. O uso do elemento hover, juntamente com a espessura e a propriedade de cor de um link, tem sido muito útil ao longo do artigo. Depois de passar por todas as ilustrações do HTML fornecido neste artigo, você poderá obter o conhecimento e o entendimento claro dos links, seu estilo e remover os sublinhados embaixo deles.