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
Alterar cores dos links - CSS
4/ 5
Oleh

26 Comentários

11 de setembro de 2010 16:38 delete

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.

Reply
19 de outubro de 2010 13:57 delete

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á.

Reply
19 de outubro de 2010 15:15 delete

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

Reply
14 de dezembro de 2010 16:15 delete

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...

Reply
14 de dezembro de 2010 16:25 delete

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

Reply
7 de janeiro de 2011 13:38 delete

Tem como deixar um link com cor diferente dos outros?

Reply
7 de janeiro de 2011 18:05 delete

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

Reply
8 de janeiro de 2011 15:36 delete

Ah ta, acho que entendi!
Muito obrigada!

Reply
19 de agosto de 2011 20:27 delete

oi quero fazer uma parceira contado oslokosamigos.blogspot.com

Reply
22 de agosto de 2011 15:45 delete

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

Reply
11 de setembro de 2011 20:35 delete

Como mudar a cor do alt dos links ?

Reply
11 de setembro de 2011 23:17 delete

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

Reply
21 de outubro de 2011 08:49 delete

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

Reply
21 de outubro de 2011 14:18 delete

Vanessa
pode usar o resumo das postagens

Reply
Anônimo
2 de dezembro de 2011 21:16 delete

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?

Reply
3 de dezembro de 2011 05:29 delete

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

Reply
18 de março de 2012 15:59 delete

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

Reply
19 de março de 2012 00:47 delete

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 >

Reply
12 de abril de 2012 19:02 delete

fabiano em que linha coloco esse codigo ?

Reply
12 de abril de 2012 23:43 delete

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

Reply
28 de agosto de 2013 19:12 delete

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

Reply
28 de agosto de 2013 20:57 delete

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

Reply
Anônimo
13 de março de 2016 13:41 delete

Os posts no meu blog têm todos 2 links, um para o crédito das imagens e outro no final do post para referência de livros.
Quero colocar cores diferentes para estes dois links, mas não sei como hei de colocar o segundo link com cor diferente...
Tenho um código CSS que atribui a mesma cor a todos os links do post, preciso de criar um segundo código para mudar a cor do segundo link.
Não posso fazer isto manualmente em cada post, queria arranjar um código CSS para ser automático... Tem alguma dica? obrigada

Ana

Reply
13 de março de 2016 14:49 delete

você pode criar estilos diferentes para os links. Entre na pagina editar html e adicione o estilo:

.livro a {color:#ccc}
.livro a:hover {color:ff0}

depois na hora de fazer a postagem deve aplicar este estilo ao link que deseja, por exemplo, colocar o link do livro dentro de divs, assim:

< div class='livro' >código do link < / div >


mas terá que fazer isso em todos os links que desejar usar esta formatação, ou seja, aqueles que já publicou terá que editar.

o nome livro foi apenas uma sugestão, mas pode criar quantos estilos diferentes quiser.

Reply