Links são muito comuns em páginas da web, mas muitos web designers não percebem o poder que eles têm com CSS para manipular e gerenciar seus links de forma eficaz. Você pode definir links com os estados visitados, em foco e ativos. Você também pode trabalhar com bordas e fundos para dar aos seus links mais pizzaz ou fazê-los parecerem com botões ou até mesmo imagens.
A maioria dos web designers começa definindo um estilo no uma tag:
um {cor: vermelho; }
Isso irá estilizar todos os aspectos do link (passar o mouse, visitado e ativo). Para estilizar cada parte separadamente, você deve usar pseudo-classes de link.
Link Pseudo-Classes
Existem quatro tipos básicos de pseudo-classes de links que você pode definir:
- : link - este é o estilo padrão para o link
- : visitou - depois que um link foi clicado
- : hover - como um mouse está posicionado sobre um link (pré-clique)
- : ativo - certo como o link está sendo clicado
Para definir uma pseudo-classe de link, use-a com o uma tag no seu seletor de CSS. Então, para alterar a cor visitada de todos os seus links para cinza, escreva:
a: visitou {color: grey; }
Se você estilizar uma pseudo-classe de links, é recomendável estilizar todos eles. Dessa forma, você não ficará surpreso com resultados irrelevantes. Então, se você quiser alterar a cor visitada para cinza, enquanto todas as outras pseudo-propriedades de seus links permanecerem em preto, você escreverá:
a: link, a: hover, a: active {color: black; } a: visitou {color: grey; }
Alterar as cores do link
A maneira mais popular de estilizar links é mudar a cor quando o mouse passa sobre ela:
um {color: # 00f; } a: hover {color: # 0f0; }
Mas não se esqueça de que você pode afetar a aparência do link enquanto clica nele com a propriedade: active:
um {color: # 00f; } a: ativo {color: # f00; }
Ou como o link parece ter sido visitado com a propriedade: visited:
um {color: # 00f; } a: visitou {color: # f0f; }
Para juntar tudo:
um {color: # 00f; } a: visitou {color: # f0f; } a: hover {color: # 0f0; } a: ativo {color: # f00; }
Colocar fundos nos links para adicionar ícones ou marcadores
Ao brincar com o fundo um pouco, você pode criar um link que tenha um ícone associado. Escolha um ícone pequeno, com cerca de 15 x 15 px, a menos que o texto seja maior. Coloque o fundo em um lado do link e defina a opção de repetição para não repetir. Em seguida, preencha o link para que o texto dentro do link seja movido para longe o suficiente para a esquerda ou direita para ver o ícone.
um {preenchimento: 0 2px 1px 15px; background: #fff url (ball.gif) centro esquerdo no-repeat; cor: # c00; }
Uma vez que você tenha o seu ícone, você pode definir uma imagem diferente como seu hover, ativo e ícones visitados para fazer o link mudar:
um {preenchimento: 0 2px 1px 15px; background: #fff url (ball.gif) centro esquerdo no-repeat; cor: # c00; } a: hover {background: #fff url (ball2.gif) centro-esquerdo no-repeat; } a: ativo {background: #fff url (ball3.gif) centro-esquerdo no-repeat; }
Faça seus links parecerem botões
Os botões são muito populares, mas até o surgimento do CSS, era preciso criar botões usando imagens, o que faz com que as páginas demorem mais para serem carregadas. Felizmente, há um estilo de borda que pode ajudá-lo a criar facilmente um efeito de botão com CSS.
um {border: 4px outset; preenchimento: 2px; text-decoration: nenhum; } a: active {border: 4px inset; }
Observe que, quando você coloca cores no início e nos estilos de inserção, os navegadores não têm a mesma probabilidade de renderizá-los como seria de esperar. Então, aqui está um botão mais chique com bordas coloridas:
um {border-style: solid; largura da borda: 1px 4px 4px 1px; text-decoration: nenhum; preenchimento: 4px; border-color: # 69f # 00f # 00f # 69f; }
E você também pode afetar os estilos ativo e suspenso de um link de botão, apenas use essas pseudo-classes:
a: link {border-style: solid; largura da borda: 1px 4px 4px 1px; text-decoration: nenhum; preenchimento: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }
