11 de fev de 2016

Como personalizar links no HTML com CSS

Oi, gente! Tudo bem com vocês? Antes de qualquer coisa só queria avisar que a série de posts ensinando a criar um layout no WordPress foi adiada porque o primeiro post acabou sendo excluído sem querer por causa de problemas técnicos aqui no CDB. Eu irei voltar com a série – o quanto antes -, mas acabei não tendo tempo pra refazer o primeiro post.

Sem Título-9 copiar

O tutorial de hoje é ensinando como personalizar links no HTML com CSS. Eu sei que é um tutorial bem simples, mas vale tanto pra Blogger quanto pra WordPress, e para quem está começando vale a pena ver as possibilidades que o CSS nos oferece <3

1. Peronalizando todos os links do seu blog

Quando criamos um blog e fazemos uma postagem com links, normalmente esses links veem com uma personalização padrão. Para fazer com que esse padrão combine com o nosso layout, precisamos fazer mudanças no css. Para fazer isso, basta adicionar o seguinte código no seu css:

a { personalização }
a:hover { personalização } /* Quando passa o mouse em cima */

Onde está escrito personalização você deverá substituir pelo o que ensinarei mais adiante (no item 3).

2. Personalizando links específicos

Vamos supor que vocês já personalizaram todos os links do blog, mas querem que os links que aparecem na sidebar (lateral) do blog sejam diferentes do restante, como vocês fazem isso? Simples. Basta procurar a classe do css correspondente à lateral e criar uma nova com o mesmo nome e um a (e a:hover} na frente. Veja o exemplo:

#sidebar { personalização da classe sidebar }
#sidebar a { personalização dos links }
#sidebar a:hover { personalização dos links }

3. Como fazer a personalização

Agora a melhor parte, vamos aprender como deixar os links do jeitinho que a gente quer. Tudo o que estiver em vermelho, vocês devem substituir na classe dos links, onde está escrito personalização.

ADICIONANDO COR NO TEXTO
color: #000;

Substituam o #000 pela cor que quiserem, caso não saibam como encontrar o código das cores, cliquem aqui ou procurem no Google por cores html.

REMOVENDO SUBLINHADO DO LINK
text-decoration: none;

Geralmente os links são padronizados com sublinhados embaixo do texto (quando passamos o mouse em cima), esse código remove esses sublinhado, porém, vocês podem mudar o none por outra personalização que queiram.

ADICIOANDO COR DE FUNDO
background: #000

Substituam o #000 pela cor que quiserem, caso não saibam como encontrar o código das cores, cliquem aqui ou procurem no Google por cores html.

ADICIONANDO ESPAÇO ENTRE O TEXTO E A COR DO FUNDO
padding: 5px;

Esse código faz com que a cor de fundo não fique grudadinha no texto, ele meio que cria uma borda em volta do texto.

ADICIONANDO BORDA
border: 1px solid #fff;

Você usa border caso queria uma borda em todo o contorno do link. Se quiser apenas embaixo: substitua border por border-bottom, se quiser no topo: border-top, se quiser no lado direito: border-right, se quiser no lado esquerdo: border-left. O 1px é a espessura da borda, o solid é o formato da borda, ou seja, neste caso ela será uma linha; se quiser tracejado substitua por dashed ou por dotted caso queira pontilhado. E o #fff é a cor que vocês já sabem como alterar!

Exemplo de um código final

a {color: #862d78; background: #eee; border-bottom: 1px solid #e4e4e4;}

O CSS tem muitas opções de personalização, principalmente o CSS3. Vocês podem googlar e usar o que encontrarem para personalizarem seus próprios links. Como vocês perceberam, é bem simples. Se tiverem algum exemplo que queiram saber como foi feito, deixem nos comentários que se eu souber eu ajudo! :)


É isso, gente! Bem simples, né? Espero que realmente seja útil e qualquer dúvida deixem nos comentários! Beijos e até o próximo!

Postado por Marcela Magossi

Apesar da carinha de 15, tem 20 anos, cursa Sistemas de Informação na Unicamp e pretende ser Presidente do Brasil. Expõe todos os seus sonhos no seu blog, Lances para sonhar, e compartilha aqui tudo o que ela aprende sobre html e design gráfico durante suas madrugadas regadas por café, chocolate e Coca-Cola.