Por padrão, o conteúdo de texto vinculado ao HTML usando o elemento "âncora" é estilizado com um sublinhado. Muitas vezes, os web designers optam por remover esse estilo padrão removendo o sublinhado.
Muitos designers não se importam com a aparência do texto sublinhado, especialmente em blocos densos de conteúdo com muitos links. Todas essas palavras sublinhadas podem realmente quebrar o fluxo de leitura de um documento. Muitos argumentaram que esses sublinhados realmente tornam as palavras mais difíceis de distinguir e ler rapidamente, devido à maneira como o sublinhado altera as formas naturais da letra.
Há benefícios legítimos para manter esses sublinhados em links de texto, no entanto. Por exemplo, quando você navega por grandes blocos de texto, os links sublinhados, combinados com o contraste de cores adequado, facilitam aos leitores verificar imediatamente uma página e ver onde estão os links.
Se você decidir remover links do texto (um processo simples que abordaremos em breve), certifique-se de encontrar maneiras de estilizar esse texto para diferenciar o que é um link do texto simples. Isso geralmente é feito com o contraste de cores mencionado anteriormente, mas a cor sozinha pode representar um problema para os visitantes com deficiências visuais, como daltonismo. Dependendo de sua forma específica de daltonismo, o contraste pode ser totalmente perdido neles, impedindo-os de ver a diferença entre o texto vinculado e o não vinculado. É por isso que o texto sublinhado ainda é considerado a melhor maneira de mostrar links.
Então, como você desativa um sublinhado se ainda quiser fazer isso? Como essa é uma característica visual com a qual estamos preocupados, vamos nos voltar para a parte do nosso site que lida com todas as coisas visuais - CSS.
Use folhas de estilos em cascata para desativar os sublinhados em links
Na maioria dos casos, você não quer desativar um sublinhado em apenas um link de texto. Em vez disso, seu estilo de design provavelmente exige que você remova os sublinhados de todos os links. Você faria isso adicionando estilos à sua folha de estilos externa.
uma { text-decoration: nenhum;}
É isso aí! Essa linha simples de CSS desativaria o sublinhado (que realmente usa a propriedade CSS para "decoração de texto") em todos os links. Você também pode ser mais específico com esse estilo. Por exemplo, se você quisesse apenas desativar o sublinhado ou os links dentro do elemento "nav", poderia escrever: nav a { text-decoration: nenhum;}
Agora, os links de texto na página receberiam o sublinhado padrão, mas os que estavam no navegador o removeriam. Uma coisa que muitos web designers escolhem fazer é ligar o link "on" quando alguém passa o mouse sobre o texto. Isso seria feito usando a pseudo-classe: hover CSS, desta forma: uma { text-decoration: nenhum;}a: hover { text-decoration: sublinhado;} Como uma alternativa para fazer alterações em uma folha de estilos externa, você também pode adicionar os estilos diretamente ao próprio elemento em HTML. O problema com esse método é que ele coloca informações de estilo dentro de sua estrutura HTML, o que não é uma prática recomendada. Estilo (CSS) e estrutura (HTML) devem ser mantidos separados. Se você quiser que todos os links de texto de um site removam o sublinhado, adicionar essas informações de estilo a cada link individualmente significa que uma quantidade razoável de marcação extra será adicionada ao código do site. Essa página pode diminuir o tempo de carregamento de um site e tornar o gerenciamento geral de páginas muito mais desafiador. Por esses motivos, é preferível sempre recorrer a uma folha de estilos externa para todas as necessidades de estilo de página. Por mais fácil que seja remover o sublinhado dos links de texto de uma página da Web, você também deve estar ciente das conseqüências de fazê-lo. Embora possa, de fato, limpar a aparência de uma página, isso pode ser feito à custa da usabilidade geral. Leve isso em consideração na próxima vez que considerar a possibilidade de alterar as propriedades de "decoração de texto" de uma página. Usando CSS Inline
No fechamento
