Link ativo do CSS
Exemplo 1
Abra seu arquivo HTML para criar links. Para modelar esses links, criaremos nosso arquivo CSS. Estamos usando o estúdio de código visual para realizar esses exemplos. Então, criamos o arquivo HTML e o código HTML também é fornecido aqui. Depois de concluir o código, salve -o com o “.Extensão HTML ”.
No código HTML anterior, criamos três links diferentes. O primeiro link que criamos é o link "Google", o segundo link é o link "Yahoo", e o último link é o link "Firefox". Também iremos estilizar esses links no CSS. Este arquivo html está aqui apenas para criar esses links. Agora, vá para o seguinte arquivo CSS e veja como estilizar esses links.
Código CSS
Na imagem anterior, usamos o seletor ": ativo", que usamos para dar estilo a esse link. Quando o usuário pressiona este link, a cor de fundo do link gira "amarelo". Então temos o seletor ": link", que estiliza o link que não é visitado e altera a cor do link não visitado para "azul". Parece "azul" na tela. Depois disso, usamos o seletor ": visitado", e este seletor visitado muda a cor do link visitado para "roxo". Finalmente, temos o seletor ": pairar" no qual mudamos a cor do link para uma cor "vermelha" quando o cursor se move sobre o link. Quando você move o mouse nesses links, a cor desses links muda para "vermelho". Neste exemplo, mudamos a cor do link quando você passa e visita o link ou a cor do link não visitado.
Saída
Você pode ver três links na imagem anterior. Os dois primeiros links são de cor "roxo", então significa que esses dois links são visitados. A cor do terceiro link é "azul", o que significa que este terceiro link não é visitado, pois definimos essas cores no código CSS para os links visitados e não visitados. Quando passamos o mouse em qualquer link, sua cor se transforma em uma cor "vermelha". Quando clicamos em qualquer link, a cor do fundo do link aparecerá "amarelo". Quando clicamos no primeiro link do Google, a página do Google aparecerá na tela, conforme mostrado na imagem a seguir:
Exemplo 2
Este é outro exemplo em que criamos um link entre o parágrafo e damos estilos a este link no CSS. Vamos ver como o link está ativo entre os parágrafos.
Na imagem anterior, você pode ver que criamos um parágrafo usando HTML e adicionou um link entre o parágrafo. Usaremos o CSS neste exemplo para alterar a cor do link e do parágrafo.
Código CSS
No arquivo CSS anterior, você pode ver que alteramos a cor do link para "azul" dentro dos aparelhos encaracolados de ": link", então esse link aparecerá azul entre os parágrafos. Em seguida, usamos uma cor "vermelha" para o link visitado. Para "Passe o Murro. A cor "ativa" do link é definida como "roxa", e a cor do parágrafo ativo é designada como cor "#eee". Portanto, quando o link está ativo, ele muda a cor do link e a cor de fundo do parágrafo.
Saída
Nesta primeira saída, você pode ver que a cor do link no parágrafo parece "azul" à medida que o definimos como "azul" em nosso arquivo CSS.
Na segunda saída, a cor do link gira para "Red", o que significa que visitamos o link aqui, então sua cor é alterada de "azul" para "vermelho".
Exemplo 3
Neste terceiro exemplo, mudaremos o tamanho da fonte, o estilo de fonte e as cores do link usando CSS. Para isso, temos que criar links diferentes em html.
No HTML anterior, criamos cinco links diferentes usando as diferentes classes dentro do "". Damos o nome da classe como "Link1", "Link2", "Link3", "Link4" e "Link5". Usamos esses nomes para mudar o estilo do link.
Código CSS
Usamos o nome "Link1" da classe e aplicamos o estilo neste primeiro link. O primeiro link parece "vermelho" quando é "ativo". Então, mudamos o "tamanho da fonte" do segundo link. Quando passamos por esse link, o tamanho deste link aumenta para "150%". Definimos a “cor de fundo” do terceiro link para “vermelho”, para que a cor do fundo se torne “vermelha” quando passamos pelo terceiro link. Mudamos o estilo de fonte do quarto link, utilizando a propriedade “Font-Family”. Usamos a "decoração de texto" no quinto link e o definimos como "sublinhado". A saída é mostrada.
Saída
Esta saída muda sua cor quando passamos pelo primeiro link. Quando passamos o mouse sobre o segundo link, seu tamanho de fonte muda. Quando se trata do terceiro link, sua cor de fundo muda. O estilo da fonte muda para o "monoespácio" quando você passa o mouse sobre o quarto link.
Exemplo 4
Neste exemplo, criaremos dois botões de link com links dentro dos botões. No primeiro botão, colocamos o link de "Gmail". Dentro do segundo botão, colocamos o link de "Facebook". Então, quando você clica no botão um, ele abrirá a página do Gmail. Ao clicar no segundo botão, ele abrirá a página do Facebook. Agora, também queremos aplicar o estilo desses links.
Quando esse link está ativo, a cor deste link parece "vermelha" quando colocamos a "cor: vermelha" dentro dos aparelhos encaracolados do seletor ": ativo". Quando passamos o mouse sobre esse link, que está dentro do botão, a cor do botão gira "rosa" enquanto definimos essa cor no arquivo CSS. Depois de visitar esses links, a cor será "azul" e a cor do fundo do botão será "branca".
Saída
A saída anterior mostra dois botões de link nos quais temos dois links diferentes e você pode ver que a cor de ambos os links é "azul", o que significa que os dois links são visitados.
Conclusão
Aprendemos sobre o "link ativo" neste guia. Aplicamos um estilo diferente em diferentes links usando as propriedades CSS. Realizamos quatro exemplos vários aqui, pois sabemos que o link está ativo quando pressionado. Aqui, mudamos o estilo do link ativo, o tamanho da fonte do link quando passamos por ele e a cor depois de visitar o link. Usamos cores diferentes para os links visitados e não visitados neste guia. Aprendemos a estilizar esses links ativos em CSS em detalhes.