Alterar cores dos links - CSS


Alterar as cores ou formatar os links que aparecem no blog é muito simples de fazer, basta editar o estilo CSS e pronto, todos os links da pagina mudam de uma vez só, mas uma coisa que atrapalha muita gente é o estilo a:visited, isso é o estilo(formatação de texto) dos links já visitados, mas podemos alterar ou mesmo remover isso do blog e assim deixando todos os links iguais.

A formatação dos links funciona da seguinte maneira:

a:link {color: #0000ff}
a:visited {color: #000000}
a:hover {color: #ff0000}

a:link normal do link, cor azul
a:visited links que você já visitou, cor preta
a:hover quando o mouse está sobre o link, cor vermelha

Então os links que já foram visitados terão uma aparência diferente seguindo a formatação de texto (cores, tamanho...) do estilo da segunda linha, muita gente corrigi isso fazendo uma formatação igual a da primeira linha, mas isso não é necessário, poderíamos excluir a segunda linha e retirar o trecho :link da primeira, ficando deste jeito:

a{ color: #0000ff }
a:hover{ color: #ff0000}

Aqui temos apenas duas opções para os links: na primeira linha a aparência normal dos links (azul) e na segunda a formatação (vermelho) para quando o mouse estiver sobre o link. Essas cores naturalmente são apenas exemplos, você pode usar as formatações de texto que desejar, colocar bordas, inclusive deixando os links com aparência de botões.

Acho que essa é uma das maneiras mais simples de resolver o problema de cores diferentes entre os links que aparecem no seu blog. Mas claro isso é uma questão de opinião de cada um se você achar útil os links já clicados parecerem diferentes então aproveite esse tutorial apenas para saber como modificar e personalizar os links.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

24 comentários:

  1. Fabiano,

    Muito bom este artigo!

    Já vi diversas pessoas perguntando como fazer para os links ficarem azuis e vermelhos quando o mouse estiver sobre os links, este artigo ajudará muitas pessoas.

    Um grande abraço a parabéns pelo seu trabalho.

    ResponderExcluir
  2. Oi! Como faço para colocar um link na minha postagem, mas sendo que apareça, por exemplo, clique aqui ou o nome do site e não a url?

    Obrigada desde já.

    ResponderExcluir
  3. o código do link é assim:

    <a href='http://www.dicasparablogs.com.br/2010/09/alterar-cores-dos-links-css.html' target='_blank'>Alterar cores dos links - CSS</a>

    na pagina de postagem selecione o texto e clique no icone de link na barra emcima da baixa de postagem

    ResponderExcluir
  4. Olá...Minha pergunta é a mesma da Isaura Mirela...
    Porém li a sua explicação e não entendi...

    Como faço para colocar um link na minha postagem, mas sendo que apareça, por exemplo, clique aqui ou o nome do site e não a url?

    Agradeço desde já e estarei esperando a resposta pois tenho tentado e não consigo...

    ResponderExcluir
  5. o código do link é como falei no comentário anterior, só precisa trocar o endereço da pagina e o texto e colocar na postagem que está escrevendo.

    ou na pagina de postagem tem uma ferramenta para criar link

    ResponderExcluir
  6. Tem como deixar um link com cor diferente dos outros?

    ResponderExcluir
  7. Andreza
    você quer um link de uma lista com a cor diferente?

    se for um lista de links feita em html é possivel editar cada link colocando style="color:#009" assim:

    <a style="color:#009" href='http://www.dicasparablogs.com.br/2010/09/alterar-cores-dos-links-css.html' title='Alterar cores dos links - CSS'>Alterar cores dos links - CSS</a>

    mas se fizer isso quando quiser trocar a cor deste link terá que editar o código, portanto não é recomendável usar em postagens pois com o passar do tempo esquecemos destas edições e se mudar a cor do fundo, letras ou qualquer coisa no seu blog a cor deste link permanecerá a mesma e pode ficar invisível se você não lembrar de alterar

    ResponderExcluir
  8. Ah ta, acho que entendi!
    Muito obrigada!

    ResponderExcluir
  9. oi quero fazer uma parceira contado oslokosamigos.blogspot.com

    ResponderExcluir
  10. Me ajudo pra caramba !! Vlw ae abraçoss..

    ResponderExcluir
  11. o alt não tem como editar... pelo menos não conheço o código

    ResponderExcluir
  12. Ei bom dia!
    gostaria de fazer Edições no meu blog.
    Por exemplo colocar os posts de forma legal.. sem nesta forma Hierarquia, sendo que pudesse mostrar os títulos com imagens..emfim...poderia me ajudar?
    Me encontre tb no meu e-mail: vanessa_cansi@hotmail.com

    ResponderExcluir
  13. Vanessa
    pode usar o resumo das postagens

    ResponderExcluir
  14. Eu não entendi,como faço para trocar de cor os links quando posto o mouse,onde acho esse

    a:link {color: #0000ff}
    no html?

    ResponderExcluir
  15. @Anônimo só precisa trocar o código da cor #0000ff, veja aqui mais Código das Cores

    ResponderExcluir
  16. Eu queria saber como eu mudo a cor de um texto ?
    tipo eu coloquei um texo no fim do blog e quero deixar a cor em branco, só que eu não consigo alguem pode tirar essa minha duvida ? ou me respondendo aqui ou mandando um email: lhenriqueg@hotmail.com

    ResponderExcluir
  17. Lucas Henrique
    se for um texto somente pode usar um gadget de html/javascript e colocar seu texto dentro deste código

    < div style="color:#fff" > texto aqui < / div >

    ResponderExcluir
  18. fabiano em que linha coloco esse codigo ?

    ResponderExcluir
  19. depois de body{.... } não tem um lugar exato

    ResponderExcluir
  20. ABENÇOADO SEJA VOCÊ QUE POSTOU TODOS ESTES TUTORIAIS DETALHADAMENTE ÓTIMOS.... A TEMPOS VENHO PESQUISANDO EM TODA A INTERNET COMO POR MENU COM SUBMENUS E NADA, TUDO PARECIA GREGO PARA MIM, E AS EXPLICAÇÕES MUITO VAGAS,MAS VOCÊ FOI NOTA MIL.. DEUS TE ABENÇOE RICAMENTE! AGORA SÓ ESTOU COM UMA GRANDE DÚVIDA: COMO FAZER PÁGINAS INDEPENDENTES NO BLOGGER? EXEMPLO: QUERO QUE QUANDO A PESSOA ENTRE NO MEU BLOG VEJA UMA PÁGINA DE BOAS VINDAS COM OS MENUS INDICATIVOS DE TUDO QUE TENHO POSTADO, AI AO ESCOLHER UM TEMA E ELA CLICAR ABRE-SE UMA PÁGINA SOMENTE COM A POSTAGEM ESCOLHIDA, SEM APARECER TUDO O QUE ESTÁ NA PÁGINA INICIAL, É POSSÍVEL FAZER ISSO, E COMO?
    MEU BLOG É: anunciandooevangelhoddeus.blogspot.com.b
    E O MEU E-MAIL É: anunciandooevangelho@hotmail.com
    Atenciosamente: Leticia

    ResponderExcluir
  21. Leticia não tem como definir uma pagina de abertura para o blog.

    mas certamente um menu é muito útil pois ajuda as pessoas encontrarem o que procuram e ficarem mais tempo na sua pagina

    ResponderExcluir