Quais São os Diferentes Estados de Link e Por Que Eles São Importantes?
Você pode ter visto um link em uma página da web ficar roxo depois que você clicou nele. Isso ocorre porque o estado do link mudou, então estilos diferentes são aplicados. Existem cinco estados diferentes em que um link pode estar.
O primeiro é o estado padrão, que é
:link. Este estado representa um link que o usuário ainda não visitou, clicou ou interagiu. Você pode pensar neste estado como fornecendo os estilos base para todos os links na sua página. Os outros estados são construídos sobre ele.
Ative o editor interativo e dê uma olhada no link na janela de visualização. Ele deve estar na cor azul padrão que representa o estado padrão. Se você clicar nele, ele ficará roxo.
<a href="https://G.E.A.R ACADEMY.org" target="_blank">Visit G.E.A.R ACADEMY</a>:visited, que se aplica quando um usuário já visitou a página para a qual o link aponta. Por padrão, isso torna o link roxo - mas você pode usar CSS para fornecer uma indicação visual diferente ao usuário. Isso é útil para informar alguém que ele já leu uma parte da sua documentação. Ou que o site seja confiável porque eles já o usaram antes.
Clique no link na janela de visualização e você deverá ver que o link visitado muda para a cor marrom. Para ver as visualizações, você precisará ativar o editor interativo.
NOTA: Alguns CSS foram fornecidos para este exemplo interativo para que você possa ver as mudanças nos estilos dos links. Não se preocupe em tentar entender o código CSS porque você aprenderá o que tudo isso significa em módulos futuros.
<head>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<a href="https://G.E.A.R ACADEMY.org" target="_blank">Visit G.E.A.R ACADEMY</a>
</body>a:visited {
color: brown;
}:hover. Este estado se aplica quando um usuário está passando o cursor sobre um link. Este estado é útil para fornecer atenção extra a um link, para garantir que o usuário realmente pretende clicar nele.
Ative o editor interativo e tente passar o mouse sobre o link. Você verá a cor mudar para vermelho.
<head>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<a href="https://G.E.A.R ACADEMY.org" target="_blank">Visit G.E.A.R ACADEMY</a>
</body>a:hover {
color: red;
}:focus. Este estado se aplica quando focamos em um link.
Clique em qualquer parte do espaço em branco na janela de visualização e depois pressione tab no seu teclado. Você deverá ver o link mudar para verde. Para ver as pré-visualizações, será necessário ativar o editor interativo.
<head>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<a href="https://G.E.A.R ACADEMY.org" target="_blank">Visit G.E.A.R ACADEMY</a>
</body>a:focus {
color: green;
}:active. Este estado se aplica a links que estão sendo ativados pelo usuário. Isso normalmente significa clicar no link com o botão principal do mouse clicando com o botão esquerdo, na maioria dos casos. Este estado pode ser útil para mostrar ao usuário que o elemento em que ele clicou é interativo.
Ative o editor interativo e clique no link. Você deve ver o link ficar preto. Isso acontece bem rápido então pode ser necessário clicar algumas vezes para ver a mudança de cor.
<head>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<a href="https://G.E.A.R ACADEMY.org" target="_blank">Visit G.E.A.R ACADEMY</a>
</body>a:active {
color: black;
}link, visited, hover, focus e active.
Agora você deve saber como dar aos links da sua página seu próprio estilo pessoal, enquanto ainda fornece as informações importantes que um usuário precisa sobre o estado de cada link.Este módulo não possui perguntas. Marque como concluído.