Os links são elementos fundamentais em páginas Web, permitindo a navegação entre páginas, documentos e recursos.
O CSS permite personalizar a aparência dos links, criando menus, botões e interfaces modernas.
<a href="https://www.exemplo.com">
Acessar Site
</a>
A tag <a> representa um link em HTML.
| Propriedade | Função |
|---|---|
| color | Define a cor do link. |
| text-decoration | Controla sublinhado. |
| background | Define fundo. |
| padding | Espaçamento interno. |
| border-radius | Arredonda bordas. |
a {
color:blue;
}
Define a cor padrão de todos os links.
Por padrão, links possuem sublinhado.
a {
text-decoration:none;
}
Muito utilizado em menus e botões.
O CSS possui pseudo-classes para controlar diferentes estados.
| Pseudo-classe | Estado |
|---|---|
| :link | Link ainda não visitado. |
| :visited | Link visitado. |
| :hover | Mouse sobre o link. |
| :active | Link sendo clicado. |
a:link {
color:blue;
}
Define o estilo inicial do link.
a:visited {
color:purple;
}
Aplica estilo após o usuário acessar o link.
Muito utilizado para criar efeitos interativos.
a:hover {
color:red;
}
a:active {
color:black;
}
Ocorre durante o clique.
a {
background:#1f4e79;
color:white;
padding:10px 20px;
border-radius:8px;
}
Técnica muito utilizada em páginas profissionais.
A propriedade transition cria animações suaves.
a {
transition:0.3s;
}
a:hover {
opacity:0.8;
}
nav a {
color:white;
text-decoration:none;
padding:15px;
}
Podemos diferenciar links externos visualmente.
a[target="_blank"] {
font-weight:bold;
}
Utilizados para navegação dentro do próprio site.
a {
text-decoration:none;
color:#333;
}
.link {
background:#1f4e79;
color:white;
padding:12px 25px;
border-radius:5px;
text-decoration:none;
}
.link:hover {
background:#163a5c;
}
| Erro | Problema |
|---|---|
| Remover sublinhado sem estilo | Usuário não identifica link. |
| Cor sem contraste | Dificulta leitura. |
| Não usar hover | Pior experiência. |
| Recurso | Função |
|---|---|
| :link | Link padrão. |
| :visited | Link visitado. |
| :hover | Efeito ao passar mouse. |
| :active | Durante clique. |