Vídeo: Tutorial - Cómo crear una Social Bar con HTML y CSS 2024
Em geral, os navegadores exibem links como texto sublinhado azul. Originalmente, esse comportamento padrão minimizava a confusão entre o conteúdo da página e um link interativo. Hoje, quase todos os estilos de sites articulam-se à sua maneira. Alguns sites não sublinham os links; outros mantêm o sublinhado, mas os links de estilo em cores diferentes do azul; e assim por diante.
O elemento de âncora HTML (
a
) é usado para criar links. O texto entre a marca de âncora e abertura é a descrição do link e o URL definido no atributo
href
é o endereço que o navegador visita quando o link é clicado.
A tag âncora evoluiu ao longo do tempo e hoje tem quatro estados:
-
link: Um link que um usuário não clicou ou visitou -
visitou: A link que um usuário clicou ou visitou -
pairar: Um link que o usuário paira no cursor do mouse sem clicar em -
ativo: um link que o usuário começou a clicar, mas ainda não lançou o botão do mouse
O CSS pode modelar cada um desses quatro estados, na maioria das vezes, usando essas propriedades e valores.
| Nome da propriedade | Valores possíveis | Descrição |
cor
|
nome
|
cor do link especificada usando nomes (
cor: azul;
), código hexadecimal (
cor: # 0000FF;
), ou valor RGB (
cor: rgb (0, 0, 255); >).
text-decoration |
none
|
sublinha
|
O exemplo a seguir se liga de maneira semelhante à sua forma de artigos em Wikipedia, onde os links aparecem em azul por padrão, sublinhados no mouse e laranja quando ativos. Conforme mostrado abaixo, o primeiro link para Chief Technology Officer dos Estados Unidos parece sublinhado como se um mouse estivesse pairando sobre ele. Além disso, o link para o Google aparece em laranja como seria, se ativado, e o mouse estava clicando nele. |
a: link {
cor: rgb (6, 69, 173);
text-decoration: none;
}
a: visitou {
cor: rgb (11, 0, 128)
}
a: hover {
text-decoration: sublinhado
}
a: ativo {
cor: rgb (250, 167, 0)
}
Wikipedia. página org mostrando link, visitado, pairar e estados ativos.
a
e o estado do link.
Embora explicando o porquê está além do escopo deste livro, as especificações CSS insistem em que você define os vários estados de link na ordem mostrada aqui - link, visitado, pairar e, em seguida, ativo.No entanto, é aceitável não definir um estado de link, desde que esta ordem seja preservada.
Os vários estados de ligação são conhecidos como
seletores de pseudo-classe. Os seletores de pseudo-classe adicionam uma palavra-chave aos seletores CSS e permitem que você estilo um estado especial do elemento selecionado.
