Aprenderemos como retirar sublinhado, inserir, mudar cor do link, inserir uma cor de plano de fundo, bordas etc. Você verá como essas opções do CSS nos permitirão estilizar nossos links das mais diversas maneiras, ao gosto do desenvolvedor.
Lembrando que links também podem ser vistos como textos, textos com características especiais, mas são textos. Ou seja, também podemos aplicar as propriedades do CSS que aplicamos nos textos.
E é basicamente isso que faremos neste tutorial.
Usar diversas propriedades do CSS nos links, e veremos as inúmeras possibilidades que temos de estilizar os hiperlinks.
Sublinhado em Links: CSS text-decoration
Por padrão, os links que criamos tem um sublinhado. É tanto que, em nosso curso de HTML, todos os links textuais que criamos possuíam o sublinhado.
Obviamente, com o CSS as coisas mudam: podemos fazer o que quiser.
E faremos isso através da propriedade CSS text-decoration.
Assim, para que seus links fiquem sem sublinhado, use o código:
a { text-decoration: none; }
Porém, não é bacana que os links fiquem sem estilo algum, pois irão se parecer simplesmente como o restante do texto.
Assim, um estilo CSS bastante utilizado é aquele de aparecer o sublinhado (underline) no link quando passamos o mouse em cima.
Isso é feito em CSS da seguinte maneira:
a:link { text-decoration: none; } a:hover { text-decoration: underline; }
Mudando a cor de Links com CSS: color
Outra maneira bem comum que vemos de se estilizar links usando CSS, é fazendo eles mudarem de cor quando passamos o mouse por cima.
Por exemplo, para que seu link seja normalmente azul e vire vermelho que você passar o mouse por cima, utilize o seguinte código CSS:
a:link { color: #00F; } a:hover { color: #F00; }
Note que estamos utilizando as propriedades do CSS que usamos em textos.
Essa flexibilidade é bem comum no CSS, o que nos permite estilizar muitas coisas, de maneiras totalmente diferentes. Tudo depende de sua criatividade.
Plano de Fundo em Links usando CSS: background-color
Uma outra maneira interessante de estilizar links com CSS, é através da propriedade background-color, que muda a cor do plano de fundo de qualquer elemento HTML.
No caso, vamos mudar a cor de fundo somente do link.
No seguinte código de CSS, o plano de fundo é amarelo naturalmente.
Depois, ao passar o mouse em cima do link, ele se torna preto:
a:link { color: #00F; background-color: yellow; } a:hover { color: #F00; background-color: black; }
Bordas em Links com CSS: border
Um maneira bem simples de estilizar links, através de coisas que já estudamos em nossos tutoriais de CSS, é o uso das bordas.
Com bordas, você pode fazer efeitos e de uma maneira simples, que destacam bem seus links.
No exemplo a seguir, a borda aparece ao redor do link, caso você passe o mouse por cima:
a:link { text-decoration: none; } a:hover { text-decoration: none; border: solid; }
Lembrando, que no tutorial sobre bordas, você vai ver que existem diversos tipos de bordas, pode definir sua espessura, cor, se aparecem em todos os cantos, etc.
Criando botões usando CSS em Links
É possível criar botões usando simplesmente estilizando links com propriedades CSS.
O grande segredo daqui são as bordas.
Se lembrar bem, os botões, embora sejam em duas dimensões, passam a sensação de ser algo com profundidade. Isso pode ser conseguir colocando bordas com cores diferentes.
Para fazer o botão que mostramos no início deste tutorial de CSS, colocamos a borda inferior do link com uma cor mais escura. A borda superior mais clara, e as laterais entre uma e outra.
Essa diferença na cor dará o efeito de profundidade.
Quando passarmos o mouse por cima do "botão" (link estilizado), tudo fica da mesma cor, dando a impressão de botão pressionado, veja como fica o código CSS:
a:link { background: #B1B1B1; color: #FFF; text-decoration: none; font-weight: bold; border-width: 4px; border-style: solid; border-top-color: #DFDFDF; border-right-color: #666; border-bottom-color: #333; border-left-color: #858585; } a:hover { background: #B1B1B1; color: #FFF; font-weight: bold; border-color: #B1B1B1; }
Para entender como simular botões e profundidade, imagine que existe uma luz acima do botão.
Assim, a borda de cima é mais clara, e a borda inferior é escura, pois está na sombra.
As bordas laterais tem uma cor entre sombra e iluminada.
Isso é bem simples de se fazer e entender atualmente, porém, antes do CSS, isso dava uma trabalheira só.
Se usava imagens para simular botões, se colocava animação e efeitos através do JavaScript e outras técnicas mais complexas.
Boa sorte!
