Colocar ou retirar contorno pontilhado de links ou personalizar eles com Css

Mostrarei o código Css para tirar o pontilhado na volta dos links ao clicar ou ao passar o mouse, ou para deixar eles personalizados.

colocar pontilhado ou tracejado em link usando CssEsse artigo é para quem já entende o básico de Css, ou alguém disposto a aprender, pesquisar na web e testar algo diferente.
Esse pontilhado pode dar uma aparência feia aos links, ou pode ser um diferencial, claro que isso depende do modelo, para alguns esse estilo não combina, e, algumas vezes ele combina mas não aparece em todos os navegadores, por isso, no decorrer do post também mostrarei uma forma de usar borda no lugar deles, para quem quiser.

O código que retira o pontilhado pode ser outline:none; mas alguns casos, dependendo do modelo Css pode haver um tipo de borda, alguns navegadores podem ter em sua configuração algo que faça um efeito parecido, caso isso ocorra essa borda aparece em todos os sites ao clicar num link, só estou citando isso para evitar que você pense que é um problema em seu blog ou site e que você precise resolver.

Entender estilo Css para links


Tratando-se de link, primeiro vamos frisar a parte que, no Css, faz referência ao link, ou seja, que vai 'dizer' qual elemento estarei modificando.

a:link ou apenas a refere-se ao link em geral
a:hover refere-se ao link quando passarem o mouse sobre ele
a:active refere-se ao link recém clicado
a:visited refere-se ao link já visitado(página visitada)
Exemplos de Css para links

Agora vamos ver um exemplo de código Css para links:
a:link{color:red;text-decoration:none;}
a:hover{color:green;text-decoration:underline;}

Antes do caracter abre-chaves está o 'tipo de elemento' que receberá o efeito ou aparência, no caso aqui são os links e os links que a pessoa passar o mouse.
Dentro dos caracteres chaves estão as aparências deles, que são a cor da fonte e text-decoration é o traço embaixo do link, e, para a:link eu coloquei text-decoration:none; sendo assim, o link não terá esse efeito, mas para a:hover eu coloquei text-decoration:underline; e sendo assim, o link só terá um traço embaixo quando o visitante passar o mouse sobre ele.

Acho que com os exemplos acima, dá para perceber que dentro de chaves estão os estilos, e logo antes de abre-chaves está o nome do elemento que receberá este estilo.

Quem usa o blogger pode ver onde coloca Css no Html do blogger

Código para eliminar a borda pontilhada


Uma maneira é procurar por outline no Css e apagar ele, isso para quem entende de Css, outra forma simples é adicionando o código que evita que ele apareça para os links, mas deve ser colocado na parte baixa do Css.
Eliminar o pontilhado do link

a:link, a{outline:none;}
Eliminar o pontilhado do link ao passar o mouse

a:hover{outline:none;}
Eliminar o pontilhado do link ao clicar

a:active{outline:none;}
Eliminar o pontilhado do link em geral

Abaixo eu juntarei o efeito outline:none para todos os efeitos de links, ou seja, para reduzir os códigos acima é possível agrupar eles e dar o mesmo estilo, isso é aplicável quando vários elementos terão o mesmo efeito.
a:link,a,a:hover,a:active{outline:none;}

Personalização com o outline


Acima você viu exemplos de códigos para eliminar um outline(contorno), entre chaves ou {dentro de chaves} está a personalização, e, você pode usar os mesmos códigos acima para criar efeitos, substituindo o outline:none; por outline:dotted red 1px; você teria um efeito pontilhado vermelho de 1 pixel, você pode aumentar esses pontinhos mudando o numero 1 e usar um outro nome de cor básica em inglês no lugar de red.
Exemplo de contorno do link pontilhado

a{outline:dotted red 2px;}

Resultado do pontilhado seria parecido
Exemplo de contorno do link tracejado

a{outline:dashed orange 3px;}

Resultado do tracejado seria parecido
Exemplo de borda do link pontilhada

a{border:dotted green 2px;}

Resultado do pontilhado seria parecido
Exemplo de borda do link sólida

a{border:solid blue 1px;}

Resultado da borda sólida seria parecido esse

Nesses últimos exemplos pode-se perceber que usei border no lugar de outline, isso porque ela tem quase o mesmo efeito e funciona em todos os navegadores, diferente do outline que não funciona no Internet Explorer 7 e versões anteriores.

Também pode notar que além do tipo de contorno, usei nomes de cores diferentes em inglês e espessuras diferentes.

Tirar ou mudar traço embaixo de links


O traço que fica abaixo dos links, frases ou palavras pode ser retirado da mesma forma que expliquei bem acima, usando o text-decoration:none; Veja um exemplo de código:

a{text-decoration:none;}

Abaixo outros exemplos de efeitos com tipos diferentes de text-decoration

Exemplo text-decoration:overline; Com traço em cima

Exemplo text-decoration:line-through; Riscado

Exemplo text-decoration:underline; Sublinhado