Por padrão, o conteúdo de texto vinculado a HTML usando o elemento ou “âncora” é estilizado com um sublinhado. Freqüentemente, os web designers optam por remover esse estilo padrão removendo o sublinhado.
Razões a favor e contra o sublinhado
Muitos designers não ligam para 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 na verdade tornam as palavras mais difíceis de distinguir e ler rapidamente devido à maneira como o sublinhado altera as formas naturais das letras. Existem benefícios legítimos em manter esses sublinhados em links de texto, no entanto. Por exemplo, quando você navega em grandes blocos de texto, os links sublinhados juntamente com o contraste de cor adequado tornam mais fácil para os leitores digitalizar imediatamente uma página e ver onde os links estão. Se você decidir remover links do texto (um processo simples que abordaremos em breve), certifique-se de encontrar maneiras de estilizar esse texto para ainda diferenciar o que é um link do que é texto simples. Isso geralmente é feito com contraste de cores, mas a cor sozinha pode representar um problema para visitantes com deficiências visuais, como daltonismo. Dependendo de sua forma particular de daltonismo, o contraste pode ser totalmente perdido para eles, impedindo-os de ver a diferença entre texto vinculado e não vinculado. É por isso que o texto sublinhado ainda é considerado a melhor forma de mostrar links. Então, como você desativa um sublinhado se ainda deseja fazê-lo? Uma vez que esta é uma característica visual que nos preocupa, vamos nos voltar para a parte do nosso site que lida com todas as coisas visuais – CSS.
Use folhas de estilo em cascata para desativar os sublinhados nos links
Na maioria dos casos, você não deseja desativar o sublinhado em apenas um link de texto. Em vez disso, seu estilo de design provavelmente exige que você remova sublinhados de todos os links. Você faria isso adicionando estilos à sua folha de estilo externa. uma {
decoração de texto: nenhum;
}
É isso! Essa linha simples de CSS desativaria o sublinhado (que na verdade usa a propriedade CSS para “decoração de texto”) em todos os links. Você também pode ser mais específico com este estilo. Por exemplo, se você quiser apenas desativar o sublinhado ou os links dentro do elemento “nav”, pode escrever: nav a {
decoração de texto: nenhum;
}
Agora, os links de texto na página receberiam o sublinhado padrão, mas aqueles na navegação teriam que removê-lo. Uma coisa que muitos web designers optam por fazer é ativar o link novamente quando alguém passa o mouse sobre o texto. Isso seria feito usando a pseudoclasse: hover CSS, como esta: a {
decoração de texto: nenhum;
}
a: hover {
decoração de texto: sublinhado;
}
Usando CSS Inline
Como alternativa para fazer alterações em uma folha de estilo 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 tenham o sublinhado removido, adicionar essas informações de estilo a cada link individualmente significaria uma boa quantidade de marcação extra sendo adicionada ao código do seu site. Esse inchaço de página pode diminuir o tempo de carregamento de um site e tornar o gerenciamento geral da página muito mais desafiador. Por esses motivos, é preferível sempre recorrer a uma folha de estilo externa para todas as necessidades de estilo de página.
No Fechamento
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 consequências de fazer isso. Embora possa realmente limpar a aparência de uma página, pode fazer isso às custas da usabilidade geral. Leve isso em consideração na próxima vez que você considerar alterar as propriedades de “decoração de texto” de uma página.
